jquery取消选择select下拉框示例代码

时间:2021-05-26

有三个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文件

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章