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操作select下拉列表框的代码
Jun 04 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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新手用的Insert和Update语句构造类
2012/03/31 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
如何清空python的变量
2020/07/05 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
厨师岗位职责
2013/11/12 职场文书
应届大学生求职的自我评价
2013/11/17 职场文书
问卷调查计划书
2014/01/10 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
学习两会精神心得范文
2014/03/17 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
公司委托书格式范文
2014/10/09 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
学校社团活动总结
2015/05/07 职场文书
旅游投诉信范文
2015/07/02 职场文书