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 = $(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); } }); }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。