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省市区三级联动示例





  • 动态加载外部javascript文件的函数代码分享

    接下来我会详细讲解“动态加载外部JavaScript文件的函数代码分享”的完整攻略，包括定义、实现、示例等多个方面的内容。 定义 在简单介绍代码之前，我们先来看看“动态加载外部JavaScript文件的函数”是什么意思。动态加载外部JavaScript文件的函数是指在网页中使用JavaScript代码动态地加载外部的JavaScript文件，并执行其中的代码…

    JavaScript 2023年5月27日
    00

  • JavaScript的事件机制详解

    JavaScript的事件机制详解 事件机制是 JavaScript 重要的一部分，它使得 Web 应用得以用户交互和响应。在本文中，我将详细讲解 JavaScript 的事件机制，包括事件模型、事件流以及事件捕获和冒泡。 事件模型 JavaScript 事件模型是一种基于事件触发的编程模型。当用户操作网页中的元素（如按钮、文本输入框等）时，会触发事件，Ja…

    JavaScript 2023年5月28日
    00

  • js实现表单校验功能

    当我们进行前端开发时，表单校验是必不可少的功能。下面是一些基本的步骤和示例，可以帮助你实现基本的表单校验功能。 步骤 选择需要校验的表单如果你的表单不止一个，可以给每个表单添加id属性，便于区分。 给表单绑定submit事件我们需要在表单提交的时候进行校验，避免用户输入不合法的信息。 $(‘#form’).submit(function(e) { // 表单…

    JavaScript 2023年6月10日
    00

  • 移动端刮刮乐的实现方式（js+HTML5）

    移动端刮刮乐的实现方式主要涉及到HTML5的canvas绘图和JavaScript的事件监听与操作，以下是完整攻略的步骤和示例说明。 1. 准备工作 首先需要准备一个空白的canvas画布和一张覆盖画布的图片。可以使用以下HTML代码创建： <canvas id="canvas" width="300" heig…

    JavaScript 2023年6月11日
    00

  • JS对象数组中如何匹配某个属性值

    针对这个问题，我们可以分为以下几个步骤进行说明： 定义一个JS对象数组； 遍历数组，检查所有对象是否包含指定的属性值； 如果找到指定的对象，就返回该对象；如果没有找到，就返回 undefined。 下面是具体的代码实现和示例： 定义 JS 对象数组 首先我们需要定义一个包含一组 JS 对象的数组，如下所示： let students = [ { id: 1,…

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