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 遮照层实现代码
Mar 31 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
给实习单位的感谢信
2014/02/01 职场文书
爽歪歪广告词
2014/03/20 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
师范生求职自荐信
2014/06/14 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
万里长城导游词
2015/01/30 职场文书
小学德育工作总结2015
2015/05/12 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
oracle重置序列从0开始递增1
2022/02/28 Oracle
小程序实现侧滑删除功能
2022/06/25 Javascript