首页 > 代码库 > Js异步级联选择框实践方法

Js异步级联选择框实践方法

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 =http://www.mamicode.com/ $(self).val();            if (isEmpty(value)) {                bindDropdownList("ddl_city", [])            } else {                bindArea("ddl_city", value);            }        }        //市值改变        function event_change_city(self) {            var value =http://www.mamicode.com/ $(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=http://www.mamicode.com/‘‘>请选择省";            } else if (targetId == "ddl_city") {                html = "<option value=http://www.mamicode.com/‘‘>请选择市";            } else if (targetId == "ddl_area") {                html = "<option value=http://www.mamicode.com/‘‘>请选择区";            } else {                html = "<option value=http://www.mamicode.com/‘‘>请选择";            }            for (var i = 0; i < data.length; i++) {                html = html + "<option value=http://www.mamicode.com/‘" + 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异步级联选择框实践方法