jquery如何取消选择select下拉框

发布时间:2020-03-26编辑:脚本学堂
分享一例jquery取消选择select下拉框的实现代码,有需要的朋友做个参考。

jquery实现取消下拉框选择项。

需求:有三个select下拉框
一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项

1,三个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>

2,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();
  }
}