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 1.0.2
Oct 11 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
js处理表格对table进行修饰
May 26 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
详解javascript数组去重问题
Nov 06 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
JS设计模式之命令模式概念与用法分析
Feb 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
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP实现事件机制的方法
2015/07/10 PHP
php实现中文转数字
2016/02/18 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
工程师自我评价怎么写
2013/09/19 职场文书
采购部主管岗位职责
2014/01/01 职场文书
入党思想汇报
2014/01/05 职场文书
五一手机促销方案
2014/03/08 职场文书
怎样填写就业意向
2014/04/02 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2015年话务员工作总结
2015/04/29 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis