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


Posted in jQuery onJuly 13, 2018

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

jQuery 相关文章推荐
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
jQuery插件实现弹性运动完整示例
Jul 07 #jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
You might like
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
php实现word转html的方法
2016/01/22 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
详解如何实现一个简单的 vuex
2018/02/10 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
python argparser的具体使用
2019/11/10 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
后勤主管工作职责
2013/12/07 职场文书
工作的心得体会
2013/12/31 职场文书
小学生秋游活动方案
2014/02/23 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python