前言:
要想实现列表级联,需要动态的添加选项。选择标签 <select> 选项<option> ,要想实现列表级联。建议先看w3c中,dom对象中的select。
第一步:先来分析select对象的属性和方法,通过w3cschool可以发现,select有options[]集合属性,和add()方法,于是乎,好像问题就变得简单了,直接往里面加就行了。
先看一下实例代码
<html>
<head>
<script type="text/javascript">
function insertOption()
{
var y=document.createElement('option');
y.text='Kiwi'
var x=document.getElementById("mySelect");
try
{
x.add(y,null); // standards compliant
}
catch(ex)
{
x.add(y); // IE only
}
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type="button" οnclick="insertOption()" value="Insert option" />
</form>
</body>
</html>
代码分析:通过上面的代码可以发现,我们往选项集合中添加的是option对象,var y=document.createElement('option');
于是乎,现在问题好像变得不是问题了,现在来看一下我写的代码:
<html>
<head>
<title>列表级联</title>
<script type="text/javascript">
function checkCity(){
}
function addCity(){
var array= new Array(["成都","新津县","金牛区"],["眉山","东坡区","丹棱县"]);
var sel_city=document.getElementById("city");
var sel_xian=document.getElementById("xian");
var y=document.createElement('option');
//这里表示选中的是第几个选项,这里第几个我们就添加第几个的县城
var cityID=sel_city.selectedIndex;
//先遍历二维数组的每一排,的第一个元素,找到匹配的城市,再添加县城
//二维数组的变量,数组名字.length是代表有多少行,数组名字[i],表示这个有多少列,数组名字[i][j],表示特定的一个元素
for(var i=0;i<array.length;i++){
var b=i+1;
if(cityID==b){
//先将原来的清空,只保留最上面的那个选中提示项
//直接设置数组的长度,将是截断和增长的效果
sel_xian.options.length=1;
for(var j=1;j<array[i].length;j++){
try{
y.text=array[i][j];
sel_xian.options.add(y);// standards compliant
}
catch(ex){
y.text=array[i][j];;
sel_xian.add(y,null);// IE only
}
}
break;
}
}
}
</script>
</head>
<body>
<select id="city" name="city" onChange="addCity()">
<option>--选择城市--</option>
<option>--成都--</option>
<option>--眉山--</option>
</select>
<select id="xian" name="xian">
<option>--县城--</option>
</select>
</body>
</html>
您发现了坑在哪里吗?
代码分析:
我上面的代码号称也是模仿实例代码的高仿真代码,那么现在问题来了?运行上面的代码会发现,不管网options集合中添加了几次,最后只添加了最后一次的结果。于是看似简单问题,程序猿又要抓耳捞腮了。
原因分析:
options集合理解存放的是option对象,上面的代码只是再不断的改变对象的属性。如果我们在list列表中不断加入同一个对象是可以的,但是这里options集合机制明显就是set集合机制,不能存放重复的对象,这也是醉了,又不能像java一样重写他的比较方法。
所以坑就在这里,options集合是不能放入重复的对象的,下面的代码才是正确的。。。。。
<html>
<head>
<title>列表级联</title>
<script type="text/javascript">
function checkCity(){
}
function addCity(){
var array= new Array(["成都","新津县","金牛区"],["眉山","东坡区","丹棱县"]);
var sel_city=document.getElementById("city");
var sel_xian=document.getElementById("xian");
//这里表示选中的是第几个选项,这里第几个我们就添加第几个的县城
var cityID=sel_city.selectedIndex;
//先遍历二维数组的每一排,的第一个元素,找到匹配的城市,再添加县城
//二维数组的变量,数组名字.length是代表有多少行,数组名字[i],表示这个有多少列,数组名字[i][j],表示特定的一个元素
for(var i=0;i<array.length;i++){
var b=i+1;
if(cityID==b){
//先将原来的清空,只保留最上面的那个选中提示项
//直接设置数组的长度,将是截断和增长的效果
sel_xian.options.length=1;
for(var j=1;j<array[i].length;j++){
try{
var y=document.createElement('option');
y.text=array[i][j];
sel_xian.options.add(y);// standards compliant
}
catch(ex){
y.text=array[i][j];;
sel_xian.add(y,null);// IE only
}
}
break;
}
}
}
</script>
</head>
<body>
<select id="city" name="city" onChange="addCity()">
<option>--选择城市--</option>
<option>--成都--</option>
<option>--眉山--</option>
</select>
<select id="xian" name="xian">
<option>--县城--</option>
</select>
</body>
</html>