聊天群有同学文城市二级联动,于此记录一份。
// 填充省下拉列表
var provincesOptionHtml = "";
var provinces = [];
var provinceAndCityArray = [{ name: "北京", cities: ["西城", "东城", "崇文", "宣武", "朝阳"] },
{ name: "上海", cities: ["闵行", "浦东", "徐汇", "松江", "金山"] }];
for(var el in provinceAndCityArray) {
provinces.push(provinceAndCityArray[el].name);
provincesOptionHtml += "<option value=" + el + ">" + provinceAndCityArray[el].name + "</option>";
}
$("#selectProvince").append(provincesOptionHtml);
// 填充城市下拉列表
$("#selectProvince").bind("change", function() {
var selectedProvince = $("#selectProvince :selected").val();
if(selectedProvince != -1) {
var citiesOptionHtml = "";
var cities = [];
cities = provinceAndCityArray[selectedProvince].cities;
for(var elCity in cities) {
citiesOptionHtml += "<option value=" + elCity + ">" + cities[elCity] + "</option>";
}
// 清空之前的城市列表
$("#selectCity option[value!=-1]").remove();
$("#selectCity option[value=-1]").attr("selected", true);
$("#selectCity").append(citiesOptionHtml);
$("#selectCity").selectmenu("refresh");
}
});
HTML
<fieldset data-role="fieldcontain" class="input-group padding-list-border padding-margin list-li radius-4">
<label class="must inline-block">*</label>
<label for="userName" class="laben-name label-group inline-block">所在市:</label>
<select name="relatives" id="selectProvince" data-native-menu="false">
<option value="-1">请选择市区</option>
</select>
</fieldset>
<fieldset data-role="fieldcontain" class="input-group padding-list-border padding-margin radius-4">
<label class="must inline-block">*</label>
<label for="userName" class="laben-name label-group inline-block">所在区:</label>
<select name="relatives" id="selectCity" data-native-menu="false">
<option value="-1">请选择区县</option>
</select>
</fieldset>