js中select的使用

最新推荐文章于 2020-05-19 16:41:41 发布

河南的lu小康

最新推荐文章于 2020-05-19 16:41:41 发布

阅读量1k

点赞数

分类专栏：学习笔记文章标签： html javascript

本文链接：https://blog.csdn.net/shouganmian_991213/article/details/18329839

版权

1 篇文章 0 订阅

订阅专栏

虽然已经很晚了不过还是要把自己的成果展现出来，其中也碰到了一些麻烦，

总体感觉js学着有点杂，特别是是修改css样式属性的时候，不过感觉js使用起来

很灵活，紧跟现在比较时髦的方法调用..

上面是我想实现的一个界面可能大家看着非常简单，不过对于初学者来说的话还是有点困难的

我想在点击省份的其中一个option时候后面的城市也跟着变化

下面是我写的代码：

<html>
	<head>
	<meta charset="UTF-8">
	<title>select.html</title>
	<script type="text/javascript">
	function $(id){
	return document.getElementById(id);
	}
	function doClick(){
	var data=[['济南','泰安','济宁'],['大同','太原','运城'],
	['洛阳','周口','漯河'],['石家庄','唐山','保定']];
	var index=$("s1").selectedIndex;
	var cities=data[index];
	var s2=$("s2");
	s2.innerHTML="";
	for(i=0;i<cities.length;i++){
	var opt=new Option(cities[i],i);
	s2.options[s2.length]=opt;
	//var opt=document.createElement("option");
	//opt.innerHTML=cities[i];
	//s2.appendChild(opt);
	}
	}
	</script>
	</head>
	<body>
	省份：
	<select onchange="doClick()" id="s1">
	<option id="1">山东</option>
	<option id="2">山西</option>
	<option id="3">河南</option>
	<option id="4">河北</option>
	</select>
	城市：
	<select id="s2"></select>
	</body>
	</html>