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服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
安装多版本Vue-CLI的实现方法
Mar 24 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新手上路(十四)
2006/10/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php二维数组转成字符串示例
2014/02/17 PHP
Gird事件机制初级读本
2007/03/10 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python生成数字图片代码分享
2017/10/31 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Python实现验证码识别
2020/06/15 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
工作检讨书怎么写
2014/10/10 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
回复函格式及范文
2015/07/14 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
 python中的元类metaclass详情
2022/05/30 Python