在写三址联动时,就会想到,该怎么处理数据,能去选择省,第二个可以把市下面的县显示出来。
对于数据:我们希望的数据是怎样的,方便我们操作。省、市、县三级联动,数据是超级相关联的,我们不能单独存数据。所以数据用数组对象,一级一级的拿到数据。
对于页面:将 标签中的内容作为 标签的滚动列表中显示内容。
<select name="" id="province">
<option value="">请选择</option>
</select>省
<select name="" id="city">
<option value="">请选择</option>
</select>市
<select name="" id="area">
<option value="">请选择</option>
</select>县
数据解决的方法,使用数组进行关联
var provinces =['山西','山东','河南','河北'];
var cities = [
['太原','晋中','大同','阳泉'],
['济南','青岛','威海'],
['郑州','洛阳'],
['石家庄','保定']
];
var areas = [
[
['小店','迎泽','杏花岭','尖草坪'],
['榆次','左权','寿阳'],
['左云'],
['平定','盂县']
],
[
['济南地区1','济南地区2'],
['青岛地区1','青岛地区2'],
['威海地区1','威海地区2'],
],
[
['郑州地区1','郑州地区2'],
['洛阳地区1','洛阳地区2'],
],
[
['石家庄地区1','石家庄地区2'],
['保定地区1','保定地区2'],
],
]
由于不知道市下面的县有哪些,就用地区表示
定义是成数组(个人小思路,如果错误 请指出来 谢谢)
比如:山西的下标为 0 ; 再找下级市的时候 对于 cities 数组 太原一列的数组下标 也为 0 ,就将其展示出来, 再找下级县的的时候 , 小店 一列的数组下标 也为 0; 就会将其展示出来 这就解决了数据找不到的 问题
页面进行展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script src="js/data.js" type="text/javascript"></script>
<script type="text/javascript">
/* $(document).ready(function(){
});*/
$(function(){
//将provinces转换成 jQuery 对象 调用 each方法进行遍历
$(provinces).each(function(i,o){
// 对其进行拼接 追加到后面
var str = "<option value=\""+i+"\">"+o+"</option>";
$('#province').append(str);
});
$('#province').on('change',function(){
pIndex = $('#province').find(':selected').attr('value')
//在重新选择省的时候,清除之前的被选择的区数据,如果在选择省的时候只调用这个方法时,
//可以采取将三级区数据清空,这样三级选择框就不会出现,否则会出现省市变化了区未变的情况
$('#city').empty().append("<option value=\"\">请选择</option>");
$('#area').empty().append("<option value=\"\">请选择</option>");
//pIndex 取到下标的值
$(cities[pIndex]).each(function(i,o){
var str = "<option value=\""+i+"\">"+o+"</option>";
$('#city').append(str);
});
})
$('#city').on('change',function(){
cIndex = $('#city').find(':selected').attr('value');
$('#area').empty().append("<option value=\"\">请选择</option>");
$(areas[pIndex][cIndex]).each(function(i,o){
var str = "<option value=\""+i+"\">"+o+"</option>";
$('#area').append(str);
});
});
});
</script>
</head>
<body>
<select name="" id="province">
<option value="">请选择</option>
</select>省
<select name="" id="city">
<option value="">请选择</option>
</select>市
<select name="" id="area">
<option value="">请选择</option>
</select>县
</body>
</html>
将jquery包引入进来
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
再把外面数据的引入进来
<script src="js/data.js" type="text/javascript"></script>
这就是一个小的三址级联