php dwz 三级联动下拉菜单

最新推荐文章于 2021-03-16 14:25:49 发布

原创最新推荐文章于 2021-03-16 14:25:49 发布 · 2.7w 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

DWZ 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种基于PHP和HTML实现的三级联动下拉菜单功能。通过选择省市区的不同选项，动态加载对应的城市和区县信息。示例中详细展示了前端页面结构及后端逻辑代码。

Tpl\ComBox\index.html：

[html] view plain copy

<h2 class="contentTitle">下拉菜单</h2>
<div class="pageContent" layoutH="56">
<select class="combox" name="province" ref="w_combox_city" refUrl="__URL__/returnCity/cityId/{value}">
<option value="all">所有省市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<select class="combox" name="city" id="w_combox_city" ref="w_combox_area" refUrl="__URL__/returnArea/areaId/{value}">
<option value="all">所有城市</option>
</select>
<select class="combox" name="area" id="w_combox_area">
<option value="all">所有区县</option>
</select>
</div>

Action\ComBoxAction.class.php：

[php] view plain copy

<?php
// 三级联动下拉菜单
class ComBoxAction extends CommonAction {
public function returnCity(){
$cityId = $_REQUEST['cityId'];
if($cityId=='sh'){
$arrCity = array(array('all','所有城市'),array('sh','上海市'));
}else if($cityId=='bj'){
$arrCity = array(array('all','所有城市'),array('bj','北京市'));
}else{
$arrCity = array(array('all','所有城市'));
}
echo json_encode($arrCity);
}
public function returnArea(){
$areaId = $_REQUEST['areaId'];
if($areaId=='sh'){
$arrArea = array(array('1','上海城市1'),array('2','上海城市2'));
}else if($areaId=='bj'){
$arrArea = array(array('3','北京城市3'),array('bj','北京城市4'));
}else{
$arrArea = array(array('all','所有城市'));
}
echo json_encode($arrArea);
}
}
?>

################################################################################

select联动效果：

模版代码：

<dl>
    <dt>品牌：</dt>
    <dd>
        <select class="combox required" name="pinpai_id" ref="jixing_id"
            refUrl="{{$smarty.const.__ROOT__?c=jixing&a=getJixing&pinpai={value}|url}}">
            <option value="">所有品牌</option>
            {{html_options options=$pinpaiArr selected=$info.pinpai_id}}
        </select>
    </dd>
</dl>
<dl>
    <dt>机型：</dt>
    <dd>
        <select class="combox required" name="jixing_id" id="jixing_id">
        <option value="">所有机型</option>
        {{html_options options=$jixingArr selected=$info.jixing_id}}
        </select>
    </dd>
</dl>

服务器端返回代码：

public function getJixingAction() {
    $pinpai = (int)$this->request('pinpai');
    $list = $this->cur_model->where('pinpai_id='.$pinpai)->order('id ASC')->select();
    $text = '[["", "所有机型"]';
    foreach ($list as $v) {
        $text .= ',["'.$v['id'].'", "'.$v['name'].'"]';
    }
    $text .= ']';
    exit($text);
}