javascript-列表级联--到底有多坑?

前言:

        要想实现列表级联,需要动态的添加选项。选择标签 <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" onclick="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>

 

 

 

 

 

 

 

 

你可能感兴趣的:(javascript-列表级联--到底有多坑?)