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

最新推荐文章于 2022-05-30 13:37:18 发布

vickeyting

最新推荐文章于 2022-05-30 13:37:18 发布

阅读量517

点赞数

分类专栏： javascript 文章标签： javascript select 自定义 options

本文链接：https://blog.csdn.net/vickeyting/article/details/38238745

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为项目做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" οnchange="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有更简单的方法，暂没做研究，有大神知道的可以帖在回复里，谢谢。