js 四級聯動

最後更新：2017-06-27 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：blog option 會議 index 擷取 var width log 聲明

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title></head><body>    <select style="width: 100px;" id="pre" onchange="chg(this);">        <option value="-1">請選擇</option>    </select>    <select style="width: 100px;" id="city" onchange="chg2(this)" ;><option value="-1">請選擇</option></select>    <select style="width: 100px;" id="area" onchange="chg3(this)"><option value="-1">請選擇</option></select>     <select style="width: 100px;" id="way"><option value="-1">請選擇</option></select></body><script>    //聲明省    var pres = ["貴州"]; //直接聲明Array    //聲明市    var cities = [        ["-請選擇-","貴陽", "遵義", "安順"],    ];    var areas = [        [            ["-請選擇-"],            ["-請選擇-", "雲岩區", "南明區"],            ["-請選擇-", "匯川區", "紅花崗區"],            ["-請選擇-", "平壩區", "普定區"],        ]    ]    var wayareas = [        [            ["-請選擇-", "噴水池2", "昌平3"],            ["-請選擇-", "海澱2", "海澱3"]        ],        [            ["-請選擇-"],            ["-請選擇-", "上海路", "南京路"],            ["-請選擇-",, "丁字口", "遵義會議"]        ],        [            ["-請選擇-"],            ["-請選擇-",, "濟南2"],            ["-請選擇-",, "青島2"]        ]    ]    //設定一個省的公用下標    var pIndex = -1;    var preEle = document.getElementById("pre");    var cityEle = document.getElementById("city");    var  areaEle = document.getElementById("area");    var wayEle = document.getElementById("way");    //先設定省的值    for (var i = 0; i < pres.length; i++) {        //聲明option.<option value="pres[i]">Pres[i]</option>        var op = new Option(pres[i], i);        //添加        preEle.options.add(op);    }    function chg(obj) {        if (obj.value == -1) {            cityEle.options.length = 0;            areaEle.options.length = 0;        }        //擷取值        var val = obj.value;        pIndex = obj.value;        //擷取ctiry        var cs = cities[val];        //擷取預設區        var as = areas[val][0];        //先清空市        cityEle.options.length = 0;        areaEle.options.length = 0;        wayEle.options.length = 0;        for (var i = 0; i < cs.length; i++) {            var op = new Option(cs[i], i);            cityEle.options.add(op);        }        for (var i = 0; i < as.length; i++) {            var op = new Option(as[i], i);            areaEle.options.add(op);        }         }    function chg2(obj) {        var val = obj.selectedIndex;        var as = areas[pIndex][val];        areaEle.options.length = 0;        for (var i = 0; i < as.length; i++) {            var op = new Option(as[i], i);            areaEle.options.add(op);        }    }    function chg3(obj) {        var val = obj.selectedIndex;        var as = wayareas[pIndex][val];        wayEle.options.length = 0;        for (var i = 0; i < as.length; i++) {            var op = new Option(as[i], i);            wayEle.options.add(op);        }    }</script></html>

js 四級聯動

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More