超简单JS二级多级联动的简单案例

发布时间：2023-10-17 15:02:00 所属栏目：教程来源：

导读：超简单的JS联动代码，不过要配合jquery用,也可以自己修改为不用任选JS库的代码

代码如下:

<tr>

<th>一级分类</th><td>

<select name="subsidiary_cat_id" class="subsidiary_cat_id" onchange

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!