版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/VVanity/article/details/47752573
公司做项目的时候,需要有这样的功能,看到时间比较充裕,就没去找demo自己去想方法写了。纯自己的想法,有些可能比较弱智,希望不要见笑。
下拉框联动最好是不要用ajax去局部刷新,虽然这样的方法比较简便,可是每点一次就访问服务器,感觉性能上不是特别理想。
来看看我是怎么写的吧:
1:html上的标签,当然你为空也行。。
<div>
<span>下拉框联动1</span>
<select id="s1" onchange="setSelect2();" >
<option value="1" >1111</option>
<option value="2" >2222</option>
<option value="3" >3333</option>
</select>
<span>下拉框联动2</span>
<select id="s2" onchange="setSelect3();" >
<option value="1" >1111</option>
<option value="2" >2222</option>
<option value="3" >3333</option>
</select>
<span>下拉框联动3</span>
<select id="s3" >
<option value="1" >1111</option>
<option value="2" >2222</option>
<option value="3" >3333</option>
</select>
</div>
</pre><pre>
2:就是数据源了,我感觉最关键的就是这些数据,他的排列啥的。理解了这个就不难了。
<span style="white-space:pre"> </span>var allData = {};//所有的数据集合
var setParent = {1:"游戏",2:"音乐",3:"电影"}; //设置父级数据
//设置子级数据 key值对应父级的
var setChild = {
1:{1:"竞技游戏",2:"娱乐游戏",3:"网络游戏"},
2:{1:"默",2:"晴天",3:"我怀念的"},
3:{1:"动画电影",2:"科幻电影",3:"恐怖电影"}
};
//设置3级子级数据,key值对应父级的,value里面的键对应着上级子级的value键值
var setChildCh = {
1:{
1:{1:"英雄联盟",2:"魔兽争霸",3:"星际争霸",4:"CS"},
2:{1:"连连看",2:"斗地主"},
3:{1:"剑灵",2:"上古世纪",3:"斗战神"}
},
3:{
1:{1:"大圣归来",2:"魁拔3",3:"汽车总动员"},
2:{1:"明日边缘",2:"侏罗纪世界"}
}
};
<span style="white-space:pre"> </span>//把所有数据都丢在一个map里面,这样可以看做这个map是从后台获取到的。然后直接赋值就好
allData.parent = setParent;
allData.child = setChild;
allData.childCh = setChildCh;
这些数据只要理解前面两个就好了,key值用数字是为了更好的跟数据库的id对应。后台怎么才能获得这样的数据json呢?
这个逻辑不难,相信动动脑子就可以
3:就是3个set方法,很简单
<span style="white-space:pre"> </span>//设置第一个下拉框
function setSelect1(){
document.getElementById("s1").options.length=0; //清除下拉框
for (var key in allData.parent){
document.getElementById("s1").options.add(new Option(allData.parent[key],key));//参数1是text显示的,参数2是value值
}
setSelect2();
}
//设置第二个下拉框
function setSelect2(){
document.getElementById("s2").options.length=0; //清除下拉框
var valuePar = document.getElementById("s1").value;//获得父级选中的值
for (var key in allData.child){
if(key == valuePar){
for (var keyc in allData.child[key]){
document.getElementById("s2").options.add(new Option(allData.child[key][keyc],keyc));
}
}
}
setSelect3();
}
//设置第三个下拉框
function setSelect3(){
document.getElementById("s3").options.length=0; //清除下拉框
var valuePar = document.getElementById("s1").value;//获得父级选中的
var par = document.getElementById("s2").value; //获得上一级选中的
for (var key in allData.childCh){
if(key == valuePar){
for (var keyc in allData.childCh[key]){
if(keyc == par){
for (var keycc in allData.childCh[key][keyc]){
document.getElementById("s3").options.add(new Option(allData.childCh[key][keyc][keycc],keycc));
}
}
}
}
}
}
页面加载的时候给allData数据(后台获得数据),然后加载
setSelect1()方法就好了。真正做起来没有想象的那么难。源代码我也上传了。