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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

ithouse   2020-05-16 我要评论

本文实例讲述了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程序设计有所帮助。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们