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 相关文章推荐
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 Javascript
利用JavaScript写一个简单计算器
Nov 27 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
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
理解javascript回调函数
2014/12/28 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
vue组件学习教程
2017/09/09 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
解决Django连接db遇到的问题
2019/08/29 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
董事长助理工作职责
2014/06/08 职场文书
合作合同协议书范本
2015/01/27 职场文书
后勤工作个人总结
2015/02/28 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL