超简单JS二级、多级联动的简单实例

前端技术 2023/09/07 JavaScript
超简单的JS联动代码,不过要配合jquery用,也可以自己修改为不用任选JS库的代码
复制代码 代码如下:

<tr>
  <th>一级分类</th><td>
    <select name=\"subsidiary_cat_id\" class=\"subsidiary_cat_id\" onchange=\"linkage(\'.subsidiary_cat_id\',\'.cat_id\');\">
      <option>请选择</option>
    </select>
    <script language=\"javascript\">
    var linkage_data={$list_file_category};//初始化级联数据,{$list_file_category}是PHP的JSON_ENCODE的数据,数组有3个数据,id,parent_id,name
    function linkage(parent_dom,son_dom){
        var parent_id=0;
        if(parent_dom){
            parent_id=$(parent_dom).val();   
        }
        $(son_dom).empty();//先清空下拉
        var html=\'<option>请选择</option>\';
        $.each(linkage_data,function(key,value){
            if(value.parent_id==parent_id){
                html+=\"<option value=\'\"+value.id+\"\'>\"+value.name+\"</option>\";
            }
        });
        $(son_dom).append(html);
    }
    linkage(\'\',\".subsidiary_cat_id\")//不传上级节点,表示为第一级数据
    </script>
    </td></tr>
<tr><th>二级目录</th><td>
  <select name=\"cat_id\" class=\"cat_id\">
    <option>请选择</option>
  </select></td></tr>

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

转载请注明出处。

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

我的博客

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