Js によって作成された第 2 レベルのリンケージと第 3 レベルのリンケージ

第 2 レベルのリンケージの実装
ステップ 1
HTML ページ上に 2 つの選択ドロップダウンリスト要素を作成し、ID を「province」および ID を「city」に設定します。

<!--省份-->
<select id="province" onchange="getCity()"></select>
  
<!--城市-->  
<select id="city">
        <option>请选择</option>
</select>

2 番目のステップ
は、HTML 内に js タグを作成して、js コードを記述することです。もちろん、js テキストを作成して、js コードを記述することもできます。ここでは単に怠惰になりたいので、スクリプトタグに直接記述します。 html ページでも効果は同じです。

さて、冗長な説明はやめて、JS コードを書き始めましょう

まず最初に、[オブジェクトリテラル] の形式である JavaScript オブジェクトリテラルを作成する必要があります。これは、キーと値のペアを含むオブジェクトを作成するために使用され、コンストラクターを定義せずにオブジェクトをすばやく作成して初期化できます。

//省市对应数据
var data = {
    
    
    "北京市": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区"],
    "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区"],
    "广东省": ["深圳市", "广州市", "珠海市", "中山市", "东莞市"]
};

次のステップは、(データの var key) で州を初期化することです。

getElementById("xxx") 获取id
createElement("xxx") 创建一个html元素节点

   //初始化省份
    var province = document.getElementById("province");
    for (var key in data) {
    
    
        var option = document.createElement("option");
        option.innerText = key;
        province.appendChild(option);
    }

都市を取得する関数を作成する

//获取城市
    function getCity() {
    
    
        var provinceName = province.value;
        var city = document.getElementById("city");
        city.innerHTML = "";
        if (data[provinceName]) {
    
    
            for (var i = 0; i < data[provinceName].length; i++) {
    
    
                var option = document.createElement("option");
                option.innerText = data[provinceName][i];
                city.appendChild(option);
            }
        }
   }

ここまで書くと2次連携は完了です

3 レベルの連携の実現
3 レベルの連携の実現は、2 レベルの連携の実現より少し複雑ですが、難しいことではありません。

最初の
古いルーチンは、上記の 2 レベルのリンクと同じで、まず HTML で 3 つのドロップダウンリストを作成します。

  <select id="province">
        
    </select>
 
    <select id="city">
        <option>请选择</option>
    </select>
 
 
    <select id="district">
        <option>请选择</option>
    </select>

次に
、上記のように HTML で作成します

var data = {
    
    
  "广东省": {
    
    
    "珠海市": ["香洲区", "斗门区"],
    "广州": ["番禺", "黄埔"]
  },
  "仙侠世界": {
    
    
    "玄幻大陆": ["无敌区", "无人区"],
    "科技大陆": ["天才区", "学士区"]
  }
};

1) 次のステップは、(データの var キー) で州を初期化することです。

// 获取省份列表
var province = document.getElementById("province");
for (var key in data) {
    
    
  var option = document.createElement("option");
  option.text = key;
  province.add(option);

2) 州ごとの都市リストを取得します。

// 根据省份获取城市列表
function getCity() {
    
    
  var city = document.getElementById("city");
  var district = document.getElementById("district");
 
  //城市为0，当选择了省份的时候才有数据
  city.options.length = 0;
  var selectedProvince = province.options[province.selectedIndex].text;
  
  //循环遍历data城市数据到option
  for (var key in data[selectedProvince]) {
    
    
    var option = document.createElement("option");
    option.text = key;
 
    //添加数据
    city.add(option);
  }
}

3) 都市に応じた地区と郡のリストを入手します。

// 根据城市获取区县列表
function getDistrict() {
    
    
  var district = document.getElementById("district");
 
  //区县为0，当选择了城市的时候才有数据
  district.options.length = 0;
 
  //获取城市
  var selectedProvince = province.options[province.selectedIndex].text;
  
  //获取区县
  var selectedCity = city.options[city.selectedIndex].text;
 
 
  //循环遍历
  for (var i = 0; i < data[selectedProvince][selectedCity].length; i++) {
    
    
    var option = document.createElement("option");
    option.text = data[selectedProvince][selectedCity][i];
    district.add(option);
  }
}
 
// 函数绑定到省份和城市下拉框的 onchange 事件上
//县列表以便在用户选择不同的省份或城市时自动更新城市和区
province.onchange = getCity;
city.onchange = getDistrict;

Js によって作成された第 2 レベルのリンケージと第 3 レベルのリンケージ

おすすめ