1. Python技术站首页
  2. 其他
  3. JavaScript

Easyui form combobox省市区三级联动

• JavaScript

Easyui form combobox省市区三级联动可以帮助用户快速选择省市区的信息，提供了良好的用户体验。下面我们来详细讲解该功能的完整攻略。

实现步骤

第一步：引入EasyUI资源文件和jQuery库文件

<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.9/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.9/themes/icon.css"/>  
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.9/jquery.easyui.min.js"></script>

第二步：定义三个下拉框

<input id="province" class="easyui-combobox" data-options="url:'getProvince.php',valueField:'id',textField:'name',onSelect:function(rec){}">
<input id="city" class="easyui-combobox" data-options="url:'getCity.php',valueField:'id',textField:'name',onSelect:function(rec){}">
<input id="district" class="easyui-combobox" data-options="url:'getDistrict.php',valueField:'id',textField:'name'">

第三步：编写三个数据源

getProvince.php

<?php
$data = array(
            array('id'=>'1','name'=>'北京'),
            array('id'=>'2','name'=>'上海'),
            array('id'=>'3','name'=>'天津'),
            array('id'=>'4','name'=>'重庆'),
            array('id'=>'5','name'=>'河北'),
            array('id'=>'6','name'=>'山西'),
            array('id'=>'7','name'=>'辽宁'),
            array('id'=>'8','name'=>'吉林'),
            array('id'=>'9','name'=>'黑龙江'),
            array('id'=>'10','name'=>'江苏'),
            array('id'=>'11','name'=>'浙江'),
            array('id'=>'12','name'=>'安徽'),
            array('id'=>'13','name'=>'福建'),
            array('id'=>'14','name'=>'江西'),
            array('id'=>'15','name'=>'山东'),
            array('id'=>'16','name'=>'河南'),
            array('id'=>'17','name'=>'湖北'),
            array('id'=>'18','name'=>'湖南'),
            array('id'=>'19','name'=>'广东'),
            array('id'=>'20','name'=>'广西'),
            array('id'=>'21','name'=>'海南'),
            array('id'=>'22','name'=>'四川'),
            array('id'=>'23','name'=>'贵州'),
            array('id'=>'24','name'=>'云南'),
            array('id'=>'25','name'=>'西藏'),
            array('id'=>'26','name'=>'陕西'),
            array('id'=>'27','name'=>'甘肃'),
            array('id'=>'28','name'=>'青海'),
            array('id'=>'29','name'=>'宁夏'),
            array('id'=>'30','name'=>'新疆'),
        );

echo json_encode($data);
?>

getCity.php

<?php
$pid = $_GET['id'];
$data = array();
switch ($pid) {
    case '1':
        $data = array(
            array('id'=>'11','name'=>'北京市')
        );
        break;
    case '2':
        $data = array(
            array('id'=>'21','name'=>'上海市')
        );
        break;
    case '3':
        $data = array(
            array('id'=>'31','name'=>'天津市')
        );
        break;
    case '4':
        $data = array(
            array('id'=>'41','name'=>'重庆市')
        );
        break;
    case '5':
        $data = array(
            array('id'=>'51','name'=>'石家庄市'),
            array('id'=>'52','name'=>'唐山市'),
            array('id'=>'53','name'=>'秦皇岛市')
        );
        break;
    case '6':
        $data = array(
            array('id'=>'61','name'=>'太原市'),
            array('id'=>'62','name'=>'大同市'),
            array('id'=>'63','name'=>'阳泉市')
        );
        break;
    case '7':
        $data = array(
            array('id'=>'71','name'=>'沈阳市'),
            array('id'=>'72','name'=>'大连市'),
            array('id'=>'73','name'=>'鞍山市')
        );
        break;
    case '8':
        $data = array(
            array('id'=>'81','name'=>'长春市'),
            array('id'=>'82','name'=>'吉林市'),
            array('id'=>'83','name'=>'四平市')
        );
        break;
    case '9':
        $data = array(
            array('id'=>'91','name'=>'哈尔滨市'),
            array('id'=>'92','name'=>'齐齐哈尔市'),
            array('id'=>'93','name'=>'牡丹江市')
        );
        break;
    case '10':
        $data = array(
            array('id'=>'101','name'=>'南京市'),
            array('id'=>'102','name'=>'无锡市'),
            array('id'=>'103','name'=>'徐州市')
        );
        break;
    case '11':
        $data = array(
            array('id'=>'111','name'=>'杭州市'),
            array('id'=>'112','name'=>'宁波市'),
            array('id'=>'113','name'=>'温州市')
        );
        break;
    default:
        break;
}

echo json_encode($data);
?>

getDistrict.php

<?php
$cid = $_GET['id'];
$data = array();
switch ($cid) {
    case '11':
        $data = array(
            array('id'=>'1101','name'=>'东城区'),
            array('id'=>'1102','name'=>'西城区'),
            array('id'=>'1103','name'=>'崇文区'),
            array('id'=>'1104','name'=>'宣武区'),
            array('id'=>'1105','name'=>'朝阳区'),
            array('id'=>'1106','name'=>'丰台区'),
            array('id'=>'1107','name'=>'石景山区'),
            array('id'=>'1108','name'=>'海淀区'),
            array('id'=>'1109','name'=>'门头沟区'),
            array('id'=>'1110','name'=>'房山区'),
            array('id'=>'1111','name'=>'通州区'),
            array('id'=>'1112','name'=>'顺义区'),
            array('id'=>'1113','name'=>'昌平区'),
        );
        break;
    case '21':
        $data = array(
            array('id'=>'2101','name'=>'黄浦区'),
            array('id'=>'2102','name'=>'卢湾区'),
            array('id'=>'2103','name'=>'徐汇区'),
            array('id'=>'2104','name'=>'长宁区'),
            array('id'=>'2105','name'=>'静安区'),
            array('id'=>'2106','name'=>'普陀区'),
            array('id'=>'2107','name'=>'闸北区'),
            array('id'=>'2108','name'=>'虹口区'),
            array('id'=>'2109','name'=>'杨浦区'),
            array('id'=>'2110','name'=>'闵行区'),
            array('id'=>'2111','name'=>'宝山区'),
            array('id'=>'2112','name'=>'嘉定区'),
            array('id'=>'2113','name'=>'浦东新区'),
        );
        break;
    case '31':
        $data = array(
            array('id'=>'3101','name'=>'和平区'),
            array('id'=>'3102','name'=>'河东区'),
            array('id'=>'3103','name'=>'河西区'),
            array('id'=>'3104','name'=>'南开区'),
            array('id'=>'3105','name'=>'河北区'),
            array('id'=>'3106','name'=>'红桥区'),
            array('id'=>'3107','name'=>'塘沽区'),
            array('id'=>'3108','name'=>'汉沽区'),
            array('id'=>'3109','name'=>'大港区'),
            array('id'=>'3110','name'=>'东丽区'),
            array('id'=>'3111','name'=>'西青区'),
            array('id'=>'3112','name'=>'津南区'),
            array('id'=>'3113','name'=>'北辰区'),
            array('id'=>'3114','name'=>'武清区'),
            array('id'=>'3115','name'=>'宝坻区'),
        );
        break;
    case '41':
        $data = array(
            array('id'=>'4101','name'=>'渝中区'),
            array('id'=>'4102','name'=>'大渡口区'),
            array('id'=>'4103','name'=>'江北区'),
            array('id'=>'4104','name'=>'南岸区'),
            array('id'=>'4105','name'=>'北碚区'),
            array('id'=>'4106','name'=>'渝北区'),
            array('id'=>'4107','name'=>'巴南区'),
            array('id'=>'4108','name'=>'长寿区'),
            array('id'=>'4109','name'=>'双桥区'),
            array('id'=>'4110','name'=>'沙坪坝区'),
            array('id'=>'4111','name'=>'万盛区'),
            array('id'=>'4112','name'=>'万州区'),
            array('id'=>'4113','name'=>'涪陵区'),
            array('id'=>'4114','name'=>'黔江区'),
            array('id'=>'4115','name'=>'永川区'),
            array('id'=>'4116','name'=>'合川区'),
            array('id'=>'4117','name'=>'江津区'),
            array('id'=>'4118','name'=>'九龙坡区'),
            array('id'=>'4119','name'=>'南川区'),
            array('id'=>'4120','name'=>'綦江县'),
            array('id'=>'4121','name'=>'潼南县'),
            array('id'=>'4122','name'=>'铜梁县'),
            array('id'=>'4123','name'=>'大足县'),
            array('id'=>'4124','name'=>'荣昌县'),
            array('id'=>'4125','name'=>'璧山县'),
            array('id'=>'4126','name'=>'垫江县'),
            array('id'=>'4127','name'=>'丰都县'),
            array('id'=>'4128','name'=>'忠县'),
            array('id'=>'4129','name'=>'开县'),
            array('id'=>'4130','name'=>'云阳县'),
            array('id'=>'4131','name'=>'奉节县'),
            array('id'=>'4132','name'=>'巫山县'),
            array('id'=>'4133','name'=>'巫溪县'),
            array('id'=>'4134','name'=>'石柱土家族自治县'),
            array('id'=>'4135','name'=>'秀山土家族苗族自治县'),
            array('id'=>'4136','name'=>'酉阳土家族苗族自治县'),
            array('id'=>'4137','name'=>'彭水苗族土家族自治县'),
        );
        break;
    case '51':
        $data = array(
            array('id'=>'5101','name'=>'长安区'),
            array('id'=>'5102','name'=>'桥西区'),
            array('id'=>'5103','name'=>'新华区'),
            array('id'=>'5104','name'=>'井陉矿区'),
            array('id'=>'5105','name'=>'裕华区'),
            array('id'=>'5106','name'=>'藁城区'),
            array('id'=>'5107','name'=>'鹿泉区'),
            array('id'=>'5108','name'=>'栾城区'),
            array('id'=>'5109','name'=>'井陉县'),
            array('id'=>'5110','name'=>'正定县'),
            array('id'=>'5111','name'=>'行唐县'),
            array('id'=>'5112','name'=>'灵寿县'),
            array('id'=>'5113','name'=>'高邑县'),
            array('id'=>'5114','name'=>'深泽县'),
            array('id'=>'5115','name'=>'赞皇县'),
            array('id'=>'5116','name'=>'无极县'),
            array('id'=>'5117','name'=>'平山县'),
            array('id'=>'5118','name'=>'元氏县'),
            array('id'=>'5119','name'=>'赵县'),
        );
        break;
    case '52':
        $data = array(
            array('id'=>'5201','name'=>'路南区'),
            array('id'=>'5202','name'=>'路北区'),
            array('id'=>'5203','name'=>'古冶区'),
            array('id'=>'5204','name'=>'开平区'),
            array('id'=>'5205','name'=>'丰南区'),
            array('id'=>'5206','name'=>'丰润区'),
            array('id'=>'5207','name'=>'滦县'),
            array('id'=>'5208','name'=>'滦南县'),
            array('id'=>'5209','name'=>'乐亭县'),
            array('id'=>'5210','name'=>'迁西县'),
            array('id'=>'5211','name'=>'玉田县'),
            array('id'=>'5212','name'=>'唐海县'),
            array('id'=>'5213','name'=>'遵化市'),
            array('id'=>'5214','name'=>'迁安市'),
        );
        break;
    case '53':
        $data = array(
            array('id'=>'5301','name'=>'海港区'),
            array('id'=>'5302','name'=>'山海关区'),
            array('id'=>'5303','name'=>'北戴河区'),
            array('id'=>'5304','name'=>'青龙满族自治县'),
            array('id'=>'5305','name'=>'昌黎县'),
            array('id'=>'5306','name'=>'抚宁县'),
            array('id'=>'5307','name'=>'卢龙县'),
        );
        break;
    default:
        break;
}

echo json_encode($data);
?>

第四步：实现省市区三级联动

$(function(){
    $('#province').combobox({
        onSelect:function(rec){
            var url = 'getCity.php?id='+rec.id;
            $('#city').combobox('clear').combobox('reload', url);
            $('#district').combobox('clear');
        }
    });
    $('#city').combobox({
        onSelect:function(rec){
            var url = 'getDistrict.php?id='+rec.id;
            $('#district').combobox('clear').combobox('reload', url);
        }
    });
});

示例

示例一：全国省市区三级联动

以下是一个全国省市区三级联动示例，你可以查看和体验该功能。在省、市、区三级下拉框中选择对应选项，可以动态联动加载下级选项。

```html





Easyui Form Combobox省市区三级联动示例





  • createElement动态创建HTML对象脚本代码

    当我们需要在网页中动态创建HTML元素时，可以使用document.createElement()方法，其语法格式为： document.createElement(tagName) 其中tagName是指要创建的HTML元素的标签名，比如div，p，ul等。 接下来，我们来具体介绍使用createElement动态创建HTML对象的完整攻略： 1. 创建H…

    JavaScript 2023年6月10日
    00

  • Script的加载方法小结

    那么让我来详细讲解Script的加载方法小结。 Script的加载方法小结 直接加载Script文件 可以使用script标签来直接加载一个外部的JavaScript文件。 <script src="path/to/script.js"></script> 这种方式最简单，也是最常见的加载方式。但它也有一些缺点，比…

    JavaScript 2023年5月27日
    00
    • 合作推广
    合作推广
    分享本页
    返回顶部