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

最新推荐文章于 2023-04-21 19:57:30 发布

涛歌依旧

最新推荐文章于 2023-04-21 19:57:30 发布

阅读量1.2w

点赞数 1

分类专栏： S1: Web

本文链接：https://blog.csdn.net/stpeace/article/details/50742601

版权

S1: Web 专栏收录该内容

133 篇文章 57 订阅

订阅专栏

直接上代码吧：

<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>