「小例子」使用jQuery实现省市区三级联动显示，附源码json文件

发工具-intellij IDEA

需求

1.实现对json文件的读取。

2.可以在省级选择所有省名和直辖市名

3.选择一级省名后自动刷新市名

4.选择二级市名后自动刷新区名

逻辑分析

第一步：读取json文件

第二步：遍历出所有一级的省名

第三步：把遍历出来的省名动态追加到select标签下

第四步：给一级省名注册change事件

第五步：点击省名后获取省的id值

第六步：确定点击的对象数据

第七步：做判断，如果直辖市的话下面就是直接显示区名，如果不是就显示市名

第八步：遍历出这个对象的地区名数据

第九步：动态追加数据

第十步：重复上步骤，完成三级追加

具体实现

页面准备

html：

<div class="container text-center">
 <h3>选择所属城市</h3>
 <br>
 <br>
 <div class="row">
 <div class="col-md-1 text-right pronciy">省:</div>
 <div class="col-md-3">
 <select class="form-control" id="pro">
 </select>
 </div>
 <div class="col-md-1 text-right pronciy">市:</div>
 <div class="col-md-3">
 <select class="form-control" id="area">
 </select>
 </div>
 <div class="col-md-1 text-right pronciy">区:</div>
 <div class="col-md-3">
 <select class="form-control" id="qu">
 </select>
 </div>
 </div>
</div>

css

<style>
 * {
 font-size: 14px;
 }
 .row .pronciy {
 width: 25px;
 height: 34px;
 font-size: 18px;
 line-height: 34px;
 }
</style>

json部分数据

{
 "label": "11",
 "value": "北京市",
 "children": [
 {
 "label": "1101",
 "value": "市辖区",
 "children": [
 {
 "label": "110101",
 "value": "东城区"
 },
 {
 "label": "110102",
 "value": "西城区"
 },
 {
 "label": "110105",
 "value": "朝阳区"
 },
 {
 "label": "110106",
 "value": "丰台区"
 },
 {
 "label": "110107",
 "value": "石景山区"
 },
 {
 "label": "110108",
 "value": "海淀区"
 },
 {
 "label": "110109",
 "value": "门头沟区"
 },
 {
 "label": "110111",
 "value": "房山区"
 },
 {
 "label": "110112",
 "value": "通州区"
 },
 {
 "label": "110113",
 "value": "顺义区"
 },
 {
 "label": "110114",
 "value": "昌平区"
 },
 {
 "label": "110115",
 "value": "大兴区"
 },
 {
 "label": "110116",
 "value": "怀柔区"
 },
 {
 "label": "110117",
 "value": "平谷区"
 },
 {
 "label": "110118",
 "value": "密云区"
 },
 {
 "label": "110119",
 "value": "延庆区"
 }
 ]
 }
 ]
},

逻辑代码

$(function () {
 $.getJSON("idcardprovince.json", function (json) {//获取json文件的数据
 var data = json.data;
 var html = "";
 var target; //定义一个目标变量
 var shi; //定义市级目标变量
 //省级操作
 for (var i = 0; i < data.length; i++) {//第一级省级名字遍历
 var lable = data[i].label;
 var city = data[i].value;
 html += "<option value='" + lable + "'>" + city + "</option>";
 $("#pro").html(html); //将遍历出来的数据追加到第一级select中
 }
 //市级操作
 $("#pro").change(function () {//给第一级选择追加一个chang事件
 var provinceid = $(this).val();//获得选中的省的lable值
 var html = "";
 for (var i = 0; i < data.length; i++) { //遍历出这个数组中的所有lable值，拿出来和点击选出的作比较
 var lable = data[i].label;
 if (provinceid === lable) {
 target = data[i];//两个值相等的时候获取这个对象 这个时候target市具体的省对象
 }
 }

 if (provinceid === "11" || provinceid === "12" || provinceid === "50" || provinceid === "31") {
 $("#area").html("<option>市辖区</option>");
 for (var j = 0; j <target.children[0].children.length ; j++) {
 // console.log(target.children[0].children[j].value);
 html+="<option value='"+target.children[0].children[j].label+"'>"+target.children[0].children[j].value+"</option>"
 }
 $("#qu").html(html);

 }else{
 for (var i = 0; i < target.children.length; i++) {//此时target为省级对象
 // console.log(target.children[i].value);
 var label = target.children[i].label;
 html += "<option value='" + label + "'>" + target.children[i].value + "</option>"
 }
 $("#area").html(html);
 }
 });

 //区级操作
 $("#area").change(function () {//对二级行政区注册change事件
 var cityLabel = $(this).val();//获取二级行政区的value值
 var html = "";

 for (var i = 0; i < target.children.length; i++) {
 console.log(target.children[i].value);
 var allcityLabel = target.children[i].label;
 if (cityLabel===allcityLabel) {
 shi = target.children[i]; //shi现在为市对象
 break;
 }

 }

 for (var j = 0; j < shi.children.length; j++) {
 // console.log(target.children[j].value);
 html += "<option value='" + shi.children[j].label + "' >" + shi.children[j].value + "</option>";
 // console.log(html);
 }
 $("#qu").html(html);
 });
 });
});

效果

如需json数据文件，请私信回复json

作者：鱼伯伯不是鱼摆摆

文介绍如何实现select下拉选项的联动效果，用户及部门信息一般是通过后端读取数据库返回的，用户一般都会属于某个部门，它们之间大多通过某个相同的ID进行关联，那么想当然地在前端选择用户时自然希望能够自动带出部门信息，避免多余的用户操作。

以上面的gif展示为例，要实现申请人和申请人部门的联动，必须要找到它们之间的关联，这里就是部门ID。

申请人信息中一定带有部门ID信息，我们可以在前端展现时，将申请人的部门ID信息写入到option中的data属性中，然后在js中跟踪申请人的选择改变事件，就可以获取到选中option的data值。

接着再遍历申请人部门的option元素，只要option的value值（value为申请人部门的ID）和选中申请人的部门ID相同，就设置该option为选中状态，这样就实现了自动联动申请人部门。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript实现select联动</title>

</head>

<body>

    <h1>JavaScript实现select联动</h1>

    <div>

        <label for="user_name" class="form-label">申请人</label>

        <!-- onchange跟踪select的变化事件，并将元素id传给update_user_dept -->

        <select id="user_name" name="user_name" onchange="update_user_dept(this.id)">

            <option value="">请选择...</option>

            <!-- option中的data值记录申请人部门ID -->

              <option value="张三" data="001">张三</option>

              <option value="李四" data="002">李四</option>

              <option value="王二麻子" data="003">王二麻子</option>

        </select>

  

        <label for="user_dept" class="form-label">申请人部门</label>

        <select id="user_dept" name="user_dept">

            <option value="">请选择...</option>

                <option value="002">财务部</option>

                <option value="001">人力部</option>

                <option value="003">工程部</option>

        </select>

    </div>

    <script src="./demo.js"></script>

</body>

</html>

在demo.js定义select改变事件的处理方法update_user_dept

果您觉得该文章对您有帮助，让更多人受用，请关注“键盘码农”，转发该文章。谢谢您的支持！

今天跟大家写了一份js的联动全选的源码，代码少，清晰易懂。

效果是这样的：

点击全选下面的就会被全部全选，或者下面的被一一选择，全选按钮也会被选中。运用复选框来实现的联动全选的功能。

点击上面的复选框就会被全选

Javascript：联动全选

当下放的复选框没有被全选，最上面的全选按钮未被选中

复选框联动全选js代码实现：

<!DOCTYPE html>

<html>

<head>

window.onload = function ()

{

var oBtn1 = document.getElementById('btn1');

var oBox = document.getElementById('box');

var oInputs = oBox.getElementsByTagName('input');

oBtn1.onclick = function ()

{

if (oBtn1.checked == true) {

for (var i = 0; i < oInputs.length; i++) {

oInputs[i].checked = true;

}

} else {

for (var i = 0; i < oInputs.length; i++) {

oInputs[i].checked = false;

}

//点击每一个input框

for (var i = 0; i < oInputs.length; i++) {

oInputs[i].onclick = function ()

{

var n = 0;

for (var i = 0; i < oInputs.length; i++) {

if (oInputs[i].checked == true) {

n++;

}

if (n == oInputs.length) {

oBtn1.checked = true;

} else {

oBtn1.checked = false;

}

</script>

</head>

<body>

</div>

</body>

</html>

相对比较简单，对于初学者应该有很好的帮助！请关注键盘码农。后期继续更新，如有什么看法请在下方评论。第一时间为您解答哦！

在线咨询

上一篇：HTML图像标记
下一篇：html网页源代码模板大全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「小例子」使用jQuery实现省市区三级联动显示，附源码json文件

发工具-intellij IDEA

需求

逻辑分析

具体实现

json部分数据

逻辑代码

效果

您的项目需求