以下是一个使用jQuery实现的省市区选择插件的简单示例。由于某东的地址选择比较复杂,这里我们只实现省市区的选择功能。
首先,确保你的页面中引入了jQuery库。
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区选择插件</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select id="province">
<option value="">选择省份</option>
</select>
<select id="city">
<option value="">选择城市</option>
</select>
<select id="district">
<option value="">选择区域</option>
</select>
<script src="address-picker.js"></script>
</body>
</html>
jQuery插件(address-picker.js):
$.fn.addressPicker = function() {
// 模拟省市区数据
var regions = {
"广东": ["广州", "深圳", "珠三角"],
"浙江": ["杭州", "宁波", "浙江中部"],
"北京": ["北京市", "北京周边"]
};
// 初始化省份选择
var $province = this.filter('#province').on('change', function() {
var province = $(this).val();
var $city = $('#city').empty();
$city.append($('<option>').text('选择城市'));
if (regions[province]) {
regions[province].forEach(function(city) {
$city.append($('<option>').val(city).text(city));
});
}
});
// 初始化城市选择
var $city = this.filter('#city').on('change', function() {
var city = $(this).val();
var $district = $('#district').empty();
$district.append($('<option>').text('选择区域'));
if (regions[province] && regions[province].indexOf(city) > -1) {
['区', '县', '镇'].forEach(function(area) {
$district.append($('<option>').val(city + area).text(city + area));
});
}
});
return this; // 支持链式调用
};
// 使用插件
$(function() {
$('#province, #city, #district').addressPicker();
});
这个插件模拟了省市区的选择,当选择省份后,相应的城市会出现在城市选单中,选择城市后,区域选单会出现相应的区域。这个例子简单易懂,但不包括某东那样复杂的地址选择逻辑。实际应用中,你需要根据实际的数据结构来填充选单。