html下拉框select及其选项option的初探

HTML选择器与JavaScript交互

最新推荐文章于 2024-09-10 13:54:44 发布

原创最新推荐文章于 2024-09-10 13:54:44 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

S1: Web 专栏收录该内容

133 篇文章

订阅专栏

本文介绍了HTML选择器如何与JavaScript交互，通过设置默认选项值和获取用户选择的选项值，实现用户界面与后台逻辑的有效连接。

直接上代码吧：

<html>
<body>

<button onClick="output()">test</button>

<select id="me">
   <option value="1">Volvo</option>
   <option value="2">Saab</option>
   <option value="3">Opel</option>
   <option value="4" selected="selected">Audi</option>
</select>

<script>
function output()
{
   var x = document.getElementById("me");
   alert(x.value);
}
</script>
  
</body>
</html>

对用户来说，显示的是Volvo, 但一旦被选择，对程序员来说，需要获取的是1这个值。

如上的selected表示默认选项。

当然，要在程序中捕捉用户的选项，也可以这么搞，用标签本书的属性，如selectedIndex：

<html>
<body>

<button onClick="output()">test</button>

<select id="me">
   <option value="11">Volvo</option>
   <option value="22">Saab</option>
   <option value="33">Opel</option>
   <option value="44" selected="selected">Audi</option>
</select>

<script>
function output()
{
   var x = document.getElementById("me");
   alert(x.selectedIndex);
}
</script>
  
</body>
</html>