jquery二级联动的实现代码一例

发布时间:2020-01-14编辑:脚本学堂
分享一例jquery 二级联动菜单的实现代码,学习下jquery 实现二级联动的方法,有需要的朋友参考下。

有如下二个select表单内容:
 

复制代码 代码示例:
<select name="companyType_1"> 
<option value="00" selected="selected">请选择</option> 
<option value="01">政府/公共管理/社会保障</option> 
<option value="02">金融/投资</option> 
</select>              
<select name="companyType_2"> 
<option value="0000" selected="selected">请选择</option> 
<option value="0101">党政机构</option> 
<option value="0102">公共事业/市政建设</option> 
<option value="0103">社会保障</option> 
<option value="0104">社会团体/非盈利组织</option> 
<option value="0132">sdafasf</option> 
<option value="0201">银行</option> 
<option value="0202">保险</option> 
<option value="0203">证券/期货</option> 
<option value="0204">金融/投资</option> 
<option value="0205">财会</option> 
<option value="0206">审计</option> 
</select> 

要求实现选01的筛选出0101-0105,选02的筛选出02-06。

jquery实现二级联动的代码:
 

复制代码 代码示例:
$(function(){
    // //这里必须用克隆,否则remove时会把$child的子节点都删除    
    var $child = $("[name=companyType_2]").clone();     
    $("[name=companyType_2] option:gt(0)").remove();
    $("[name=companyType_1]").change(function(){     
        var parentVal = $(this).val();
        //先删除,再添加 
        $("[name=companyType_2] option:gt(0)").remove();     
        // www.jb200.com
        if(parentVal!='00'){ 
           //把符合条件的克隆出来,然后添加到selected节点中,这样不会改变$child本身的内容。
           $child.find("option[value^="+parentVal+"]").clone().appendTo($("[name=companyType_2]")); 
        } 
    })
})
 

备注:这里不能对option用hide()方法,因为IE不支持。