基于jQuery实现简单的JS二级及多级联动下拉菜单

基于jQuery实现简单的JS二级及多级联动下拉菜单

这段代码提供了一个非常基础的JavaScript联动实现方案，建议配合jQuery库使用。如果项目不使用任何JS库，也可以对代码进行相应修改以适配原生JavaScript环境。

<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生成的数据，数组包含三个字段：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>