js学习笔记（三）省市联动案例的实现


<html >
 <head>
 
  <title>Htmltest</title>
 </head>
 <body>
<select id= "s1" onchange=add(this.value);>
    <option value="0">--请选择--</option>
    <option value="中国" > 中国 </option>
    <option value="美国" > 美国 </option>
    <option value="日本" > 日本 </option>
    <option value="中国台湾" > 中国台湾</option>
</select>
<select id="s2">

</select>
 </body>
 <script type="text/javascript">
 var arr=new Array(4);
 arr[0]=["中国","北京","南京","香港"];//js的数组用[]来表示
 arr[1]=["美国","纽约","华盛顿","底特律"];
 arr[2]=["日本","东京","大阪","广岛"];
 arr[3]=["中国台湾","高雄","台北","台中"];
 
 function add(str)
 {
/* 
     步骤；
	     1在option标签上加上onchange表示点击之后会运行add(String str)函数
		 2遍历二维数组 把传递过来的参数str与二维数组中的一维数组的头进行比较
		 3如果比较的值相同，则把后面的值加到s2中
		 4注意后面的值是文本文档，要加入的是option标签对象用document.createElement()来创建标签然后用document.creatTextNode()来创建文本对象
		 5把文本对象加入到标签对象中
		 6.问题：每次添加后在点击s1框，又会添加属于它的元素，而前面的元素没有被删除
		 

 */
 var s2= document.getElementById("s2");
 var options=s2.getElemenyByTagName("option");
 for(var m=0;m<options.length;m++)
 {
    var op=option[m];
	city.removeChild(op);
	m--;
 }
 for(var i=0;i<arr.length;i++)
 {
  var arr1=arr[i];//得到一位数组
  var value=arr1[0];//把地位数组中的第一个值设为value
  if(value==str)
 {//如果值相同便利该一位数组后的值加到s2中
  for(var j=1;j<arr1.length;j++)
  {
   /* 步骤：
         1获取到要加入到的对象
		 2创建option标签创建文本文档
		 3appendChild进行加入操作
   */
    var value=arr[j];    
	var op=document.createElement("option");
	var text=document.createTextNode(value);
	op.appendChild(text);
	s2.appendChild(op);
	j--;//因为数组的长度会改变
   }
 }
  }
 }
 </script>
</html>
js学习笔记（三） 省市联动案例的实现

猜你喜欢

js学习笔记（三）省市联动案例的实现
