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 相关文章推荐
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
vue实现购物车选择功能
Jan 10 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实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
Python实现爬取逐浪小说的方法
2015/07/07 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
新手学python应该下哪个版本
2020/06/11 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
linux下进程间通信的方式
2013/01/23 面试题
跳槽求职信范文
2014/05/26 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
党员个人整改措施
2014/10/24 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
初中教师个人总结
2015/02/10 职场文书
个人工作年终总结
2015/03/09 职场文书
鲁冰花观后感
2015/06/10 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
python如何读取和存储dict()与.json格式文件
2022/06/25 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL