多维数组 SELECT 联动
写在前面
在工作中，业务经常需要实现 SELECT 多级联动，思路大概分为两种：1. AJAX 动态获取下级 SELECT 内容 2. 一次性加载数据，通过 JS 动态调整下级 SELECT 内容。
在第二种方式中就需要考虑到 PHP 多维数组 传值 给JS
1. PHP 数组 传值
PHP 代码
<?php
$parentList = array(
array('id' => 1, 'name' => '主内容1'),
array('id' => 3, 'name' => '主内容3'),
array('id' => 5, 'name' => '主内容5'),
);
// 这是一个三维数组，数组 $key 是上级下拉菜单的id,$val 是 下级下拉菜单的数据
$dataList = array(
'1'=> array(array('id'=>1,'name'=>'选项1'),array('id'=>2,'name'=>'选项2')),
'3'=> array(array('id'=>3,'name'=>'选项3'),array('id'=>4,'name'=>'选项x')),
'5'=> array(array('id'=>4,'name'=>'选项4'),array('id'=>5,'name'=>'选项5')),
);
$json= json_encode($dataList );
?>
JS 代码
<script>
// PHP 转义成 JSON 的数据传递给 js 即自动转为多为数组
// dataList 就是 js 最终的多维数组了
var dataList= <?=$json?>;
</script>
2. SELECT 联动实现
思路：JS 获取到来自 PHP 的多维数组 $data 之后，通过上级菜单的选中 value （即 多维数组的 key键）对应的 value 值 就是下级菜单的数据来源了。遍历 value 并拼接 option 标签 所得到的 HTML。赋值给 下级 SELECT
<script>
function getSelectChildHtml(){
var parentId= $("#select-parent").val();
var dataList= <?=$json?>;
var data= dataList[parentId];
var html='';
for(var i=0;i<data.length;i++){
html = html + "<option value='"+data[i]['id']+"'>"+data[i]['name']+"</option>"
}
$("#select-child").html(html);
}
</script>
HTML 数据
// 主 SELECT
<select id="select-parent" class="form-control" onchange="getSelectChildHtml()">
<?php foreach($parenList as $parent):?>
<option value="<?=$parent['id']?>"><?=$parent['name']?></option>
<?php endforeach;?>
</select>
// 子 SELECT
<select id="select-child" name="department_id" class="form-control">
</select>
← 多数组全排列 PHP 解析 html 类 →