jquery取消选择select下拉框示例代码


Posted in Javascript onFebruary 22, 2014

有三个select下拉框
一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项
这需求有点儿..........

下面是三个select:

<select name="pWaqqqy" id="sel_type" onchange="selectFunction()">
        <option value="">全部</option>
        <option value="7">aa</option>
        <option value="8">bb</option>
    </select>
    <select name="pWay" id="sel_children0" style="display:none;">
        <option value="">全部</option>
        <option value="5">a</option>
        <option value="3">a</option>
        <option value="1">a</option>
        <option value="2">a</option>
        <option value="6">a</option>
    </select>
    <select name="pWay" id="sel_children1" style="display:none;">
        <option value="">全部</option>
        <option value="4">b</option>
    </select>

jquery扩展,调用时,使用$("select").removeSelected();
jQuery.fn.removeSelected = function() {
    this.val("");
};

大类选择框选中时,调用selectFunction()方法:
function selectFunction(){
            if($("#sel_type").val()=="7"){
                 $("#sel_children0").show();
                 $("#sel_children1").hide();
                 $("#sel_children1").removeSelected();
             }else if($("#sel_type").val()=="8"){
                 $("#sel_children1").show();
                 $("#sel_children0").hide();
                 $("#sel_children0").removeSelected();
             }else{
                 $("#sel_children0").hide().removeSelected();
                 $("#sel_children1").hide().removeSelected();
             }
        }

前提是先引入jquery.js文件
Javascript 相关文章推荐
为jQuery增加join方法的实现代码
Nov 28 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
js实现简单的计算器功能
Jan 16 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
微信小程序实现弹出层效果
May 26 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 #Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 #Javascript
js document.write()使用介绍
Feb 21 #Javascript
jQuery写fadeTo示例代码
Feb 21 #Javascript
iframe父页面获取子页面参数的方法
Feb 21 #Javascript
表单序列化与jq中的serialize使用示例
Feb 21 #Javascript
常规表格多表头查询示例
Feb 21 #Javascript
You might like
php 删除数组元素
2009/01/16 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
Python heapq使用详解及实例代码
2017/01/25 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Python实现SMTP邮件发送
2020/06/16 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
实习报告评语
2014/04/26 职场文书
满月酒邀请函
2015/01/30 职场文书
人代会简报
2015/07/21 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers