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

 更新时间:2018年07月13日 12:10:03   作者:ithouse  
这篇文章主要介绍了jQuery实现监听下拉框选中内容发生改变操作,结合实例形式分析了jQuery针对select选中触发change事件相关操作技巧,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

jQuery代码部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/ithouse/article/details/38122297

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

最新评论