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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jquery自定义组件实例详解
Dec 31 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将数据导入到Foxmail
2006/10/09 PHP
PHP开发注意事项总结
2015/02/04 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
python em算法的实现
2020/10/03 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
物流仓储计划书
2014/01/10 职场文书
房地产开盘策划方案
2014/02/10 职场文书
一体化教学实施方案
2014/05/10 职场文书
医院领导班子整改方案
2014/10/01 职场文书
盲山观后感
2015/06/11 职场文书
开工典礼致辞
2015/07/29 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书