JS原生實作二級聯動選單（市/區縣）

🍅 Java學習路線：搬磚工的Java學習路線
🍅 作者：程式員小王
🍅 程式員小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF
🍅 掃描主頁左側二維碼，加我微信一起學習、一起進步
🍅 歡迎點贊 👍 收藏 ?留言 📝

一、下拉串列二級/三級聯動示意圖

在這里插入圖片描述

二、js中操作下拉串列的相關屬性

selObj.value 獲取下拉串列中選中項的值
selObj.options 下拉串列中所有選項構成的陣列
selObj.selectedIndex 選中選項的下標
selObj.options[selObj.selectedIndex].text 選中選項的文本

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉串列標簽屬性的案例</title>
    <script>
        //js代碼
        function test1() {
              //獲取select標簽物件
            var city = document.getElementById("city");
             //下拉串列物件 options 獲取下拉串列所有的option標簽物件
            var options = city.options;
            //獲取下拉串列有幾個資料
            alert(options.length);
            //下拉串列物件，selectedIndex 獲取下拉串列選中的option下標
            alert(city.selectedIndex);
            //下拉串列物件.value 獲取下拉串列中選中的option的value值
            alert(city.value);
        }
    </script>
</head>
<body>
城市：
<select onchange="test1()" id="city">
    <option value="tj">天津</option>
    <option value="bj"> 北京</option>
    <option value="sh">上海</option>
    <option value="cq">重慶</option>
</select>
</body>
</html>

三、 JS簡單實作二級聯動選單

實作思路：
事件源頭：城市對應的下拉串列
事件屬性：選中的值改變 onchange
事件監聽：根據選擇城市展示縣區資訊

核心:監聽函式的實作——>根據選中城市展示縣區資訊

1. json格式的資料準備：key-value
var city={
  tj:["北辰區","西青區","武清區","和平區","濱海新區"],
  zy:["紅花港區","播州區"],
  bj:["海淀區","朝陽區","東城區"]
  zz:["二七區","金水區","中原區"],
}
2. 創建監聽函式test();
   （1）每次選擇前先去清空縣區下拉串列的內容 document.getElementBYId("qx").innerText="";
    (2)獲取城市的資訊document.getElementBYId("city").value;
    (3)獲取區縣的值（兩種方法） city.["tj"];
    (4)遍歷區縣的資訊for(inner in 區縣的值qus)
       a、為區縣的值封裝成文本節點
       b、創建option標簽物件 document.crementElement("option");
       c、將文本節點追加到option中 option.appendChild(文本節點);
       d、將option封裝到select select.appendChild(option);
3. 初始化方法，重繪頁面時，自動選擇第一個縣區資訊
function  init(){
            //初始化方法，重繪頁面時，自動選擇第一個縣區資訊
            test1();
        }

1、html代碼：

1、首先應該添加兩個下拉串列并設定id屬性來方便操作：

<body onload="init();">
城市：
<select onchange="test1()" id="city">
    <option value="tj">天津</option>
    <option value="zy"> 遵義</option>
    <option value="bj">北京</option>
    <option value="zz">鄭州</option>
</select>
區/縣：
<select id="qx">
</select>
</body>

2、javaScript代碼

js先提前準備區縣的資料：

  //資料準備
        var city = {
            tj: ["北辰區", "西青區", "武清區", "和平區", "濱海新區"],
            zy: ["紅花港區", "播州區"],
            bj: ["海淀區", "朝陽區", "東城區"],
            zz: ["二七區", "金水區", "中原區"],
        }

實作二級聯動的方法：test1(),

實作初始化的方法，讓打開網頁時區縣有初始資料init();

 <script>
    
        //js代碼
        function test1() {
            //每次選擇前先去清空縣區下拉串列的內容
            var xqSelect= document.getElementById("qx");
            xqSelect.innerText="";

            //1獲取city的名字（value）
            var selectValue = document.getElementById("city").value;
            //2.從city物件中獲取指定城市對應的區縣資訊
            //json根據鍵獲取值的兩種方法：key.value || key[value]
            var xqElement = city[selectValue];
            //3.獲取到區縣后的進行遍
            for (var i=0;i<xqElement.length;i++) {
            //4.獲取當前元素封裝成文本節點
                var text = document.createTextNode( xqElement[i]);
            //5.創建option物件
                var option = document.createElement("option");
            //6.將區、縣的資料添加到option標簽物件中
                option.appendChild(text);
            //7.將option放到select標簽中
                xqSelect.appendChild(option);
            }
        }
        function  init(){
            //初始化方法，重繪頁面時，自動選擇第一個縣區資訊
            test1();
        }
    </script>

完整代碼在githee倉庫：：https://gitee.com/wanghengjie563135/java-web-notes.git

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/328021.html

標籤：其他

上一篇：gitbook安裝教程