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

前端技术 2023/09/01 JavaScript

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

本文地址：https://www.stayed.cn/item/1791

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案