DOM操作表单（select下拉选框）

最新推荐文章于 2022-05-31 09:48:35 发布

转载最新推荐文章于 2022-05-31 09:48:35 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/youcandomore/p/7235194.html

文章标签：

#前端 #ViewUI

本文通过一个HTML示例展示了如何使用JavaScript获取下拉菜单中被选中的选项，并通过按钮触发显示所选城市名称的功能。该示例包含一个预设为贵阳的下拉列表及四个用于操作选项的按钮。

<!DOCTYPE html>
<html>

<body>
<select id="city" name="city" size="5">
<option value="CD">成都</option>
<option value="CQ">重庆</option>
<option value="GY" selected="selected">贵阳</option>
<option value="XZ">西藏</option>
<option value="XJ">新疆</option>
</select>
<input type="button" value="one" onclick="show(myselect.options[0]);" />
<input type="button" value="two" onclick="show(myselect.options[myselect.selectedIndex-1]);" />
<input type="button" value="three" onclick="show(myselect.options[myselect.selectedIndex+1]);" />
<input type="button" value="four" onclick="show(myselect.options[myselect.length-1]);" />
</body>
<script>
var myselect = document.getElementById('city');
var show = function(city) {
alert(city.text);
}
</script>