您的位置：首页 > Web前端 > HTML

DHTML:<select>

2016-06-20 16:35 246 查看

利用select组件即下拉框来做到一些想要的功能

这里很重要的一点是它的事件是onchange事件而不是onclick事件。

我们通过拿到select标签然后用这个节点的options拿到所有下拉框中的所有选项，用一个selectedIndex拿到我们选的是哪一项，与上面拿到的options数组结合就可以拿到我们所选的option进一步可以拿到option里面的value属性进行读取。再利用document的创建节点技术挂到一个我们事先给定位置的节点的树下。达到我们的目的。

在这里，有两个实例来帮助理解select组件的用途，代码如下：

实例一：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select组件演示</title>
<style type="text/css">
.colorClass{
height:60px;
width:80px;
float:left;
margin-right:10px;
margin-bottom:25px;
}
.context{
clear:left;
}

</style>
<script type="text/javascript">
function changeColor(oDivNode){
document.getElementById("text").style.color=oDivNode.style.backgroundColor;
}
function changeColor2(){
var oSelectNode = document.getElementById("colorSelect");
var oItemOptions = oSelectNode.options;
var index = oSelectNode.selectedIndex;
var colorName=oItemOptions[index].value;
document.getElementById("text").style.color=colorName;
}
function changeColor3(){
var oSelectNode = document.getElementById("colorSelect2");
var oItemOptions = oSelectNode.options;
var index = oSelectNode.selectedIndex;
var colorName=oItemOptions[index].value;
document.getElementById("text").style.color=colorName;
}
</script>
</head>
<body>
<div>
<div class="colorClass" id="color1" style="background-color:red" onclick="changeColor(this)"/></div>
<div class="colorClass" id="color2" style="background-color:blue" onclick="changeColor(this)"/></div>
<div class="colorClass" id="color3" style="background-color:green" onclick="changeColor(this)"/></div>
</div>
<hr/>
<div id="text" class="context">
要显示的内容文本<br/>
要显示的内容文本<br/>
要显示的内容文本<br/>
要显示的内容文本<br/>
</div>
<hr/>
<select id="colorSelect" onchange="changeColor2()">
<option>--请选择颜色--</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<hr/>
<select id="colorSelect2" onchange="changeColor3()">
<option>--请选择颜色--</option>
<option value="red" style="background-color:red"></option>
<option value="green" style="background-color:green"></option>
<option value="blue" style="background-color:blue"></option>
</select>
</body>
</html>

实例二

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select组件演示</title>
<style type="text/css">
</style>
<script type="text/javascript">
function addCities(){
var oSelectNode = document.getElementById("selectId");
var index = oSelectNode.selectedIndex;
var selectOption = oSelectNode.options[index];
//alert(selectOption.value);
//json技术:
var province ={ "hunan":["长沙","株洲","衡山","益阳"],
"hubei":["武汉","武昌", "汉口","宜昌"],
"guangdong":["广州","东莞","深圳","珠海"]
};
var cityNames = province[selectOption.value];
var subSelectNode = document.getElementById("subSelectId");
//法一：
//subSelectNode.options.length=1;

//法二
//              for(var x=subSelectNode.length-1;x>=1;x--){
//                  subSelectNode.removeChild(subSelectNode.options[x]);
//              }
//法三:利用js中数组的长度是自动更新的。
for(var x=1;x<subSelectNode.length;){
subSelectNode.removeChild(subSelectNode.options[x]);
}
for(var x=1;x<cityNames.length;x++){
var optionNode = document.createElement("option");
optionNode.innerHTML=cityNames[x];
subSelectNode.appendChild(optionNode);
}
}

function changePic(){
var oSelectNode = document.getElementById("imgSelectId");
var index = oSelectNode.selectedIndex;//被选中的index
var oSelectOptions = oSelectNode.options;//所有的选项
var oSelectOption = oSelectOptions[index];//被选中的option
var optionValue = oSelectOption.value;//属性名

var oDivNode = document.getElementById("imgId");
for(var x=0;x<oDivNode.childNodes.length;){
oDivNode.removeChild(oDivNode.childNodes[x]);
}

var oImgNode = document.createElement("img");
oImgNode.src="imgs\\"+optionValue+".jpg";
oImgNode.alt="图片正在加载，请稍后";
oImgNode.style.width="500px";
oImgNode.style.height="400px";
oDivNode.appendChild(oImgNode);
}
</script>
</head>
<body>
<select id="selectId" onchange="addCities()">
<option>--请选择省份--</option>
<option value="hunan">--湖南省--</option>
<option value="hubei">--湖北省--</option>
<option value="guangdong">--广东省--</option>
</select>
<select id="subSelectId">
<option>--请选择城市--</option>
</select>
<hr/>
<div id="imgId">

</div>
<select id="imgSelectId" onchange="changePic()">
<option>--请选择图片--</option>
<option value="1">亚瑟王</option>
<option value="2">亚丝娜</option>
<option value="3">琅琊榜</option>
</select>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航