jquery 地址四级联级显示 不默认选择
在jQuery中,实现地址四级联动并且不默认选择任何地址,可以通过监听每级联动的选择事件,然后根据选择的结果动态更新下一级的选项列表。以下是一个简单的例子:
HTML结构示例:
<select id="province">
<option value="">选择省份</option>
</select>
<select id="city">
<option value="">选择城市</option>
</select>
<select id="district">
<option value="">选择区/县</option>
</select>
<select id="street">
<option value="">选择街道</option>
</select>
jQuery代码示例:
$(document).ready(function() {
var provinceData = {
"110000": ["北京市"],
"120000": ["天津市"],
// ... 其他省份数据
};
var cityData = {
"110100": ["市区"],
"110200": ["县城"],
// ... 其他城市数据
};
var districtData = {
"110101": ["东城区"],
"110102": ["西城区"],
// ... 其他区/县数据
};
var streetData = {
"110101001": ["东城区街道1"],
"110101002": ["东城区街道2"],
// ... 其他街道数据
};
var updateCity = function(provinceId) {
var cities = provinceData[provinceId] || [];
$('#city').empty();
$.each(cities, function(index, city) {
$('#city').append($('<option>').text(city).val(city.substring(0, 4) + '0000'));
});
updateDistrict($('#city').val());
};
var updateDistrict = function(cityId) {
var districts = cityData[cityId] || [];
$('#district').empty();
$.each(districts, function(index, district) {
$('#district').append($('<option>').text(district).val(district.substring(0, 6) + '00'));
});
updateStreet($('#district').val());
};
var updateStreet = function(districtId) {
var streets = streetData[districtId] || [];
$('#street').empty();
$.each(streets, function(index, street) {
$('#street').append($('<option>').text(street).val(street.substring(0, 12)));
});
};
$('#province').change(function() {
updateCity(this.value);
});
$('#city').change(function() {
updateDistrict(this.value);
});
$('#district').change(function() {
updateStreet(this.value);
});
// 初始化时不默认选择任何地址
updateCity(''); // 更新城市列表
updateDistrict(''); // 更新区/县列表
updateStreet(''); // 更新街道列表
});
在这个例子中,我们定义了四个下拉菜单,分别用于选择省份、城市、区/县和街道。我们还定义了四个数据对象,分别用于存储省份、城市、区/县和街道的数据。然后我们定义了更新下级列表的函数,并在每个级别的下拉菜单中的change
事件处理
评论已关闭