動態地對選擇中的變化做出反應

我正在構建一個基於Spring MVC的web應用程序，其中我將使用幾個下拉菜單。動態地對選擇中的變化做出反應

我想要完成的是，當用戶選擇其中一個可用選項時，該選項的描述將出現在選擇標籤旁邊。

<select name="userType"> 
      <c:forEach items="${userTypes}" var="userType"> 
       <option>${userType.userType}</option> 
      </c:forEach> 
     </select><br/><br/>

下一步，我想有一個字段，將顯示類似

${userType.description}

每個在下拉菜單中的選項。

什麼是做到這一點的最好方法是什麼？

感謝有人花時間幫助我。

來源

2012-12-19 Eugen

這是一個更多的javascript問題。以及你可以在服務器端做到這一點，但這將是矯枉過正。

我會用cleint端JavaScript和jQuery，更改HTML/JSP來

<select id="userType" name="userType"> 
    <c:forEach items="${userTypes}" var="userType"> 
    <option value=${userType.description}>${userType.userType}</option> 
    </c:forEach> 
</select><span id="myDivNextSelectTag></span><br/><br/>

...和jQuery的

$("#userType").change(function(){ 
    $("#myDivNextSelectTag").html($(this).value); 
})

可能有一些語法錯誤，但你應該得到的的想法 - 你可以使用data html attribute而不是option value。

來源

2012-12-19 10:14:41 NimChimpsky

你可以用javascript來實現它。在我的例子中，我將使用jQuery。

<select name="userType"> 
    <c:forEach items="${userTypes}" var="userType"> 
     <option value="${userType.userType}">${userType.userType}</option> 
    </c:forEach> 
</select> 

<%-- hidden descriptions waiting to be shown. --%> 
<c:forEach items="${userTypes}" var="userType"> 
    <div style="display:none" id="${userType.userType}" class="description">${userType.description}</div> 
</c:forEach> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
    $('select[name=userType]').change(function() { 
     var userType = $(this).val() 
     $('.description').hide(); 
     $('#' + userType).show(); 
    }); 
</script>

幾件事情要記住：

沒有最初顯示的說明。應該是微不足道的，如果需要修復。
我假設我的例子userType是唯一的。
如果description或userType包含html，它們可能會破壞您的標記。考慮使用<c:out>

來源

2012-12-19 10:15:00 Yevgeniy

可悲的是，似乎沒有任何改變（我是一個JBL的總noobot）...它不會崩潰或任何東西，只是作爲如果腳本沒有運行 – Eugen

動態地對選擇中的變化做出反應

回答

相關問題