Js非同步級聯選擇框實踐方法

標籤：style   blog   io   ar   color   sp   java   for   on   

HTML:

<li>                <span>所在地區：</span>                <select name="prov" id="ddl_prov" onchange="event_change_prov(this);" class="required" missingmsg="請選擇省">                    <option value="">請選擇省</option>                </select>            </li>            <li>                <span></span>                <select name="city" id="ddl_city" onchange="event_change_city(this);" class="required" missingmsg="請選擇市">                    <option value="">請選擇市</option>                </select>            </li>            <li>                <span></span>                <select name="area" id="ddl_area" class="required" missingmsg="請選擇區">                    <option value="">請選擇區</option>                </select>            </li>

Javascript:

//省值改變        function event_change_prov(self) {            var value = $(self).val();            if (isEmpty(value)) {                bindDropdownList("ddl_city", [])            } else {                bindArea("ddl_city", value);            }        }        //市值改變        function event_change_city(self) {            var value = $(self).val();            if (isEmpty(value)) {                bindDropdownList("ddl_area", [])            } else {                bindArea("ddl_area", value);            }        }        //綁定下拉框        function bindDropdownList(targetId, data) {            $("#" + targetId).html("");            var html = "";            if (targetId == "ddl_prov")            {                html="<option value=‘‘>請選擇省</option>";            } else if (targetId == "ddl_city") {                html = "<option value=‘‘>請選擇市</option>";            } else if (targetId == "ddl_area") {                html = "<option value=‘‘>請選擇區</option>";            } else {                html = "<option value=‘‘>請選擇</option>";            }            for (var i = 0; i < data.length; i++) {                html = html + "<option value=‘" + data[i].Value + "‘>" + data[i].Text + "</option>";            }            $("#" + targetId).html(html);        }        //級聯下拉框列表        var ddls = ["ddl_prov", "ddl_city", "ddl_area"];        //綁定地區        function bindArea(id, code) {            if (isEmpty(id) || $("#" + id).length == 0) {return;            }            if (id == "ddl_prov" && isEmpty(code)) {                code = "";            }            Request.get(‘/XXX/XXX?code=‘ + code,                    function (result) {                        bindDropdownList(id, result);                        var name = $("#" + id).attr("name");                        var or = $("#hid_" + name).val();                        if (isEmpty(or)) {return;                        }                        $("#" + id).val(or);                        var ncode = $("#" + id).val();                        var index = ddls.indexOf(id);                        if (index >= 0 && index < ddls.length - 1) {                            var nid = ddls[index + 1];                            bindArea(nid, ncode);                        }                    });        }

 

Js非同步級聯選擇框實踐方法