二级联动

最新推荐文章于 2023-05-27 21:26:14 发布

原创最新推荐文章于 2023-05-27 21:26:14 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JQuery #二级联动 #ViewUI

JavaWeb 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript和jQuery实现二级联动选择器的功能。包括HTML结构的搭建，JavaScript方法getCity()的实现，以及jQuery简化操作的代码示例。同时，解释了HTMLDOM的selectedIndex属性的作用，并提供了获取被选中选项索引的函数。文章还对比了两种不同的实现方式，帮助开发者理解并选择适合自己的实现策略。

一、用js写二级联动

<body>
   <select id="province" onchange="getCity()">
   		<option>请选择：</option>
        <option value="sx">山西省</option>
		<option value="hb">河北省</option>
		<option value="sd">山东省</option>
   </select>
   
   <select id="city">
       <option>请选择：</option>
   </select>
</body>

<script type="text/javascript">
   var city = new Array();
   city[0] = ["运城","太原","忻州"];
   city[1] = ["邯郸","石家庄","保定"];
   city[2] = ["济南","青岛","烟台"];

   function getCity(){
       var province = document.getElementById("province");
	   var Index = province.selectedIndex;
	   var c = document.getElementById("city");
	   //清空选项
	   c.length = 1;
	   for(var i = 0; i < city[Index - 1].length; i++){
	   		var op = new Option(city[Index - 1][i]);
		    c.appendChild(op);
	   }  
   }
</script>

二、用JQuery写二级联动

<body>
	<select name="province" id="province">

		<option>请选择省份</option>

		<option>山西</option>

		<option>山东</option>
		
		<option>河北</option>

	</select>

	
	<select name="city" class="city">

	<option>请选择城市</option>

	</select>


	<select name="city" class="city"  style="display:none;">

		<option>太原</option>

		<option>运城</option>

		<option>大同</option>

	</select>

	
	<select name="city" class="city"  style="display:none;" >

		<option>济南</option>

		<option>秦皇岛</option>
		
		<option>威海</option>

	</select>
	
	<select name="city" class="city"  style="display:none;" >

		<option>邯郸</option>

		<option>石家庄</option>
		
		<option>衡水</option>

	</select>
</body>

<script type="text/javascript" src="jquery-1.8.0.js">
</script>
<script type="text/javascript">
	$(document).ready(function(){

  		$('#province').change(function(){

    		$('#province option').each(function(i){

 				if($(this).attr('selected')){

  					$('.city').hide().eq(i).show();

  		   		}

			}); 

  		});

	});
</script>

三、补充知识：HTML DOM selectedIndex 属性

<body>
<form>
Select your favorite fruit:
<select id="mySelect">
 <option>请选择：</option>
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br /><br />
<input type="button" onclick="getIndex()"
value="被选中的索引号是">
</form>

</body>

<script type="text/javascript">
function getIndex()
  {
  var x=document.getElementById("mySelect")
  alert(x.selectedIndex)
  }
</script>