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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
js 替换
Feb 19 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
JavaScript中立即执行函数实例详解
Nov 04 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
如何在selenium中使用js实现定位
Aug 18 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
itchat接口使用示例
2017/10/23 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python实现趣味图片字符化
2019/04/30 Python
django admin组件使用方法详解
2019/07/19 Python
python 求定积分和不定积分示例
2019/11/20 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
化工机械应届生求职信
2013/11/04 职场文书
煤矿班组长的职责
2013/12/25 职场文书
工作表现评语
2014/01/19 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书