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生成asp.net服务器控件的代码
Feb 04 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
javascript常用经典算法详解
Jan 11 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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
wordpress之wp-settings.php
2007/08/17 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
form自动提交实例讲解
2017/07/10 PHP
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
简单介绍Python中的floor()方法
2015/05/15 Python
Python实现线程池代码分享
2015/06/21 Python
Python中防止sql注入的方法详解
2017/02/25 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
护士个人年度总结范文
2015/02/13 职场文书
水电施工员岗位职责
2015/04/11 职场文书
行政前台岗位职责
2015/04/16 职场文书
毕业典礼主持词
2015/06/29 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书