[Note]select城市选择

最新推荐文章于 2025-06-22 21:21:52 发布

Our Service

最新推荐文章于 2025-06-22 21:21:52 发布

阅读量685

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的图片切换功能实现方法及一个城市选择器的示例。通过JavaScript实现了图片选项变化时图片的动态更新，并展示了如何根据所选省份显示相应城市的下拉列表。

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

<img id="tu" src="1.jpg" height=100>
<select name="sel" onchange="test(this)">
	<option value="1.jpg">one</option>
	<option value="2.jpg">two</option>
	<option value="3.jpg">three</option>
	<option value="4.jpg">four</option>
</select>

<script>
	var tu=document.getElementById("tu");
	function test(obj){
		var index=obj.selectedIndex;
		tu.src=obj.options[index].value;
	}
</script>



<!------------------------城市选择实例---------------------------------->
<!-Demo.html file--->
<script src="city.js"></script>
<script>
	scity("prop","cit");
</script>


<!--city.js file--->
	var province=['北京','上海','陕西'];
	var citys=new Array(
		new Array("北京");
		new Array("上海");
		new Array("西安","宝鸡","咸阳");
	);
function scity(pname,cname){
	document.write('<select id="pro" onchange="selectc(this)" name="'+pname+'">');
	document.write('<option value="">--选择省份--</option>');
	for(var i=0;i<province.length;i++){
		document.write('<option value="'+province[i]+'">'+province[i]+'</option>')
	}
	document.write('</select>');


	document.write('<select id="city" name="'+cname+'">');
	document.write('<option value="">--选择城市--</option>');
	
	document.write('</select>');
	selectc(document.getElementById("pro"));
}

function selectc(pobj){
	var index=proj.selectedIndex-1;
	var cobj=document.getElementById("city");
	cobj.innerHTML=""
	if(index>=0){
		for(var i=0;i<citys[index].length;i++){
			var option=document.createElement("option");
			var text=citys[index][i];
			option.value=text;
			option.innerHTML=text;
			cobj.appendChild(option);
		}
		
	}else{
		var option=document.createElement("option");
		option.value="";
		option.innerHTML="--选择城市--";
		cobj.appendChild(option);
		
	}

}