超简单JS二级、多级联动

最新推荐文章于 2023-09-23 13:15:52 发布

原创最新推荐文章于 2023-09-23 13:15:52 发布 · 867 阅读

0 ·

CC 4.0 BY-SA版权

javascipt 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JS和jQuery实现的简单联动代码，通过HTML表单中的选择器实现二级目录的动态加载。

超简单的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>