zZ爱吃菜

【PHP】多维数组赋值给JS 实现 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>
码字很辛苦,转载请注明来自L&N 博客《【PHP】多维数组赋值给JS 实现 SELECT 联动》

评论