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

最新推荐文章于 2022-09-09 20:56:35 发布

原创最新推荐文章于 2022-09-09 20:56:35 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript 列表级联 options select

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文讨论了在HTML中使用JavaScript实现列表级联时遇到的问题，即选项集合不允许重复对象，通过实例代码展示了正确的方法来避免此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

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