文章摘要
这篇文章详细介绍了使用 jQuery 实现多级下拉框的技术，展示了如何通过 JavaScript 动态生成省份、市、县的下拉选项。文章重点描述了如何在每次选择时，正确显示更高一级别的筛选项，避免重复显示或数据叠加的问题。通过代码示例，文章演示了从省份到市再到县的多级筛选逻辑，为前端开发者提供了一种高效的多层级数据选择方式。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title></title>
<script src=”https://www.jb51.net/article/jquery-3.4.1.js” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javascript”>
$(function($){
function queryData(obj,callback){
// $.ajax({
// type:’get’,
// url:’http://localhost/AJAX/select.php’,
// data:obj,
// dataType:’json’,
// success:function(data){
// callback(data);
// }
// });
$.get(‘http://localhost/AJAX/select.php’,obj,function(data){
callback(data);
},’json’);
};
queryData({
flag:1
},function(data){
var option=”;
$.each(data,function(i,e){
option +='<option value=”‘ + e.id + ‘”>’ + e.province +'</option>’
});
$(‘#province’).append(option);
});
$(‘#province’).change(function(){
// 避免数据叠加
$(‘#city’).find(‘option:gt(0)’).remove();
queryData({
flag:2,
pId:$(this).val()
},function(data){
var option=”;
$.each(data,function(i,e){
option +='<option value=”‘ + e.id + ‘”>’ + e.city +'</option>’
});
$(‘#city’).append(option);
});
});
$(‘#city’).change(function(){
$(‘#county’).find(‘option:gt(0)’).remove();
queryData({
flag:3,
cId:$(this).val()
},function(data){
var option=”;
$.each(data,function(i,e){
option +='<option value=”‘ + e.id + ‘”>’ + e.county +'</option>’
});
$(‘#county’).append(option);
});
});
});
</script>
<style type=”text/css”>
#container{
width: 500px;
min-height: 300px;
margin: auto;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id=”container”>
<label>
省:
<select id=”province”>
<option >请选择省…</option>
</select>
</label>
<label>
市:
<select id=”city”>
<option >请选择市…</option>
</select>
</label>
<label>
县:
<select id=”county”>
<option >请选择县…</option>
</select>
</label>
</div>
</body>
</html>