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实现广告漂浮效果的小例子
Jul 02 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
vue的mixins属性详解
Mar 14 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 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 cache类代码(php数据缓存类)
2010/04/15 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
js获取div高度的代码
2008/08/09 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
详解Python中import机制
2020/09/11 Python
深圳-东方伟业笔试部分
2015/02/11 面试题
房地产融资计划书
2014/01/10 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技