javascript获取select里面的各种值以及select里面的自定义

来源：互联网发布：正大数据恢复编辑：程序博客网时间：2024/05/23 16:28

为项目做gm工具，jsp写界面，然后想用到select标签实现选择某个属性的值然后对应的其他属性也跟着变化这一效果。于是就查资料知道select标签可以如下使用

<html>

<title>test select</title>
<script type="text/javascript">
window.onload = selectShow;
function selectShow(){

var objs = document.getElementById("testSelect");
// 获取被选中的下标
var selectedIndex = objs.selectedIndex;
// 获取选中的option对象
var selectedObj = objs.options[selectedIndex];
// 让div里面显示选中的option的value值
document.getElementById("capitalName").innerHTML = selectedObj.getAttribute("capital");
document.getElementById("rank").innerHTML = selectedObj.value;

}
</script>
<body>
<table border="1" cellpadding="0" cellspacing="0" align="center">
<tr>
<th>choose one people</th>
<th>capital</th>
<th>rank</th>
</tr>
<tr>
<td>
<select id="testSelect" onchange="selectShow()">
<option capital="Beijing" value="1" selected="selected">Chinese</option>
<option capital="Landon" value="2">English</option>
<option capital="Paris" value="3">French</option>
</select>
</td>
<td id="capitalName"></td>
<td id="rank"></td>
</tr>
</table>
</body>

</html>

貌似jquery有更简单的方法，暂没做研究，有大神知道的可以帖在回复里，谢谢。

0 0