首页 > 代码库 > 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异步级联选择框实践方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。