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 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
指定区域的图片自动按比例缩小的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压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
js实现微信分享代码
2020/10/11 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
Python实现文件复制删除
2016/04/19 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python算术运算符实例详解
2017/05/31 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
java executor包参数处理功能 
2022/02/15 Java/Android
详解CSS3浏览器兼容
2022/12/24 HTML / CSS