JS三級聯(lián)動代碼格式實例詳解

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

這篇文章主要介紹了JS三級聯(lián)動代碼格式實例詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

實現(xiàn)js多級聯(lián)動的代碼格式

<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
</head>
<body>
  省份<select id="pro" onchange="getcity()"> <!--創(chuàng)造三個下拉選項欄-->
     <option>選擇省份</option>
  </select>
  城市<select id="city" onchange="getarea()">
    <option>選擇城市</option>
  </select>
  區(qū)<select id="area">
    <option>選擇區(qū)</option>
  </select>
</body>

</html>
<script type="text/javascript">
  var sheng = ["湖北省", "湖南省", "廣東省"];
  var city = [["武漢市", "宜昌市", "咸寧市"], ["長沙市", "常德市", "邵陽市"], ["廣州市", "深圳市", "惠州市"]]
  var ar = [[["武昌區(qū)", "洪山區(qū)"], ["夷陵區(qū)"], ["咸安區(qū)"]], [["芙蓉區(qū)"], ["鼎城區(qū)"], ["雙清區(qū)"]], [["荔灣區(qū)"], ["福田區(qū)"], ["惠陽區(qū)"]]]
  window.onload = start;
  var s = document.getElementById("pro"); //設(shè)置初始的省份選項
  function start() {

    for (var i = 0; i < sheng.length; i++) {
      var op = document.createElement("option");
      op.innerHTML = sheng[i];
      s.appendChild(op);   //添加幾個可選擇的省份到第一個選項下拉欄
    }
  }
  var c = document.getElementById("city")
  function getcity() {
    c.length = 1;
    var sw = s.selectedIndex;//找到省份位置，從而好使后面的城市與省份對應(yīng)
    var citys = city[sw - 1];
    for (var j = 0; j < citys.length; j++) {
      var op1 = document.createElement("option");
      op1.innerHTML = citys[j];
      c.appendChild(op1);
    }
  }
  var a = document.getElementById("area")
  function getarea() {
    a.length = 1;
    var sw = s.selectedIndex;//省份位置，與上一步中的sw一樣
    var cw = c.selectedIndex;//城市位置
    var citys = ar[sw - 1];//先把三維數(shù)組中的區(qū)域找出來，確定是哪個省里的幾個區(qū)
    var ars = citys[cw - 1];//再w位置，把對應(yīng)的區(qū)對應(yīng)給相應(yīng)的城市
    for (var k = 0; k < ars.length; k++) {
      var op2 = document.createElement("option");
      op2.innerHTML = ars[k];
      a.appendChild(op2);
    }
  }
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：使用webpack搭建vue環(huán)境的教程詳解

欄目：JavaScript

下一篇：Vue 實現(xiàn)顯示/隱藏層的思路（加全局點(diǎn)擊事件）

本文標(biāo)題：JS三級聯(lián)動代碼格式實例詳解

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9345.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

JS三級聯(lián)動代碼格式實例詳解

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀