JavaScript -- Input Select 操作, 级联菜单

最新推荐文章于 2020-08-28 08:43:32 发布

今晚打酱油8

最新推荐文章于 2020-08-28 08:43:32 发布

阅读量2.1k

点赞数

分类专栏： Ajax JavaScript 前台页面制作

本文链接：https://blog.csdn.net/xj626852095/article/details/17055557

版权

Ajax JavaScript 前台页面制作专栏收录该内容

73 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">
#cssId{
	width:200px;
	height:50px;
	background-color:#FFFF66;
}

#textId{
	width:200px;
	background-color:#999999;
}
</style>

<script type="text/javascript">
function change(selNode)
{
	var value = selNode.options[selNode.selectedIndex].value;
	var cssId = document.getElementById("cssId");
	
	cssId.style.textTransform = value;
	
	var textId = document.getElementById("textId");
	textId.innerHTML = "text-transform: " + value;
}
</script>

</head>

<body>

<div id="cssId">
	Good good study,Day day up!!
</div>

<p/>
<select id="selId" οnchange="change(this)"> 
	<option value="none">--选择样式--</option>
	<option value="capitalize">首字母大写</option>
	<option value="uppercase">所有字母大写</option>
	<option value="lowercase">所有字母小写</option>
</select>
<p/>

<div id="textId">
	text-transform:node;
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">

function selCity()
{
	var arr = [["--选择省份--"],
				["北京城市一","北京城市二","北京城市三"],
				["上海城市一","上海城市二","上海城市三"],
				["广州城市一","广州城市二","广州城市三"],
				["深圳城市一","深圳城市二","深圳城市三"] ];
				
	var selNode = document.getElementById("selid");
	var subselNode = document.getElementById("subselid");
	var index = selNode.selectedIndex;
	var citys = arr[index];
	
	//方法一
	subselNode.options.length = 0;
	/* 方法二
	for(var j=0; j<subselNode.options.length;)  //不要j++， options.length删除一个已经变化
	{
		alert(subselNode.options.length);
		subselNode.removeChild(subselNode.options[j]);
	} */			
	for(var i=0; i<citys.length; i++)
	{
		var optionNode = document.createElement("option");
		optionNode.innerText = citys[i];
		subselNode.appendChild(optionNode);
	} 				
}

</script>

</head>

<body>

<select id="selid" οnchange="selCity(this)">
	<option>--选择省份--</option>
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
	<option>深圳</option>
</select>

<select id="subselid">
	<option>--选择省份--</option>
</select>

</body>
</html>

今晚打酱油8

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript -- Input Select 操作, 级联菜单

无标题文档#cssId{ width:200px; height:50px; background-color:#FFFF66;}#textId{ width:200px; background-color:#999999;}function change(selNode){ var value = selNode.optio
复制链接

扫一扫