JavaScript

超轻量级php框架startmvc

jQuery实现监听下拉框选中内容发生改变操作示例

更新时间:2020-07-16 20:12:01 作者:startmvc
本文实例讲述了jQuery实现监听下拉框选中内容发生改变操作。分享给大家供大家参考,具体

本文实例讲述了jQuery实现监听下拉框选中内容发生改变操作。分享给大家供大家参考,具体如下:

jQuery代码部分:


<script>
 $(document).ready(function(){
 var defaultId = "${defaultSelected}";
 var defaultTime = "${timeName}";
 $("select option").each(function(){
 if($(this).val()==defaultId || $(this).val()==defaultTime){
 $(this).attr("selected","selected");
 }
 });
 $("#all").change(function(){
 //alert(document.getElementById("allItem").selected);
 if(document.getElementById("allItem").selected == true){
 $("#timeText").hide();
 $("#timeSelect").hide();
 }else{
 $("#timeText").show();
 $("#timeSelect").show();
 }
 });
 });
</script>

HTML部分:


<form action="${baseUrl}/report/issueStatus.shtml">
 <span>Select a project:</span>
 <select name="selectedProId" id="all">
 <c:forEach items="${projectNameId}" var="pi">
 <option value="${pi.value}">${pi.key}</option>
 </c:forEach>
 <option value="-1" id="allItem">All</option>
 </select>
 <span id="timeText">Select a time horizon:</span>
 <select name="timeHorizon" id="timeSelect">
 <option value="Week">Last week</option>
 <option value="Month">Last month</option>
 </select>
 <button type="submit" id="submit">search</button>
</form>

jQuery 监听 下拉框 选中 内容发生改变