快捷導(dǎo)航

JS三級(jí)聯(lián)動(dòng)代碼格式實(shí)例詳解

更新時(shí)間：2019年12月30日 15:43:52 作者：漁堂-net-王衛(wèi)松

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

實(shí)現(xiàn)js多級(jí)聯(lián)動(dòng)的代碼格式

<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)造三個(gè)下拉選項(xià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è)置初始的省份選項(xiàng)
  function start() {

    for (var i = 0; i < sheng.length; i++) {
      var op = document.createElement("option");
      op.innerHTML = sheng[i];
      s.appendChild(op);   //添加幾個(gè)可選擇的省份到第一個(gè)選項(xiàng)下拉欄
    }
  }
  var c = document.getElementById("city")
  function getcity() {
    c.length = 1;
    var sw = s.selectedIndex;//找到省份位置，從而好使后面的城市與省份對(duì)應(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ū)域找出來，確定是哪個(gè)省里的幾個(gè)區(qū)
    var ars = citys[cw - 1];//再w位置，把對(duì)應(yīng)的區(qū)對(duì)應(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: