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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
JS常用表单验证方法总结
May 22 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
vue3.0 上手体验
Sep 21 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 $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Python列表(List)知识点总结
2019/02/18 Python
python高级特性简介
2020/08/13 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
python通过cython加密代码
2020/12/11 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
学生会主席就职演讲稿
2014/01/14 职场文书
文明村创建实施方案
2014/03/27 职场文书
推广普通话演讲稿
2014/05/23 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
三下乡活动心得体会
2016/01/23 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers