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实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
初学JavaScript第二章
2008/09/30 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
python实现在IDLE中输入多行的方法
2018/04/19 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
如何基于python操作json文件获取内容
2019/12/24 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
土木工程应届生求职信
2013/10/31 职场文书
精彩广告词大全
2014/03/19 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers