jQuery库+distpicker库实现省市区三级联动效果（超简单版）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区三级联动效果示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path_to/distpicker.data.js"></script>
<script src="path_to/distpicker.js"></script>
<link rel="stylesheet" href="path_to/distpicker.css">
</head>
<body>
<div class="form-group">
<label class="control-label">地址选择：</label>
<div id="distpicker">
<select id="province" data-province="---- 选择省份 ----"></select>
<select id="city" data-city="---- 选择城市 ----"></select>
<select id="district" data-district="---- 选择区县 ----"></select>
</div>
</div>
<script>
$(function(){
$('#distpicker').distpicker({
province: '---- 选择省份 ----',
city: '---- 选择城市 ----',
district: '---- 选择区县 ----'
});
});
</script>
</body>
</html>这段代码展示了如何使用jQuery和distpicker库来创建一个基本的省市区三级联动效果。在这个例子中，我们引入了必要的CSS和JavaScript文件，并在页面加载完成后初始化了distpicker插件。这个插件会自动将三个下拉菜单转换为联动的地区选择器。
评论已关闭