「小例子」使用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部分數據

邏輯代碼

效果

您的項目需求