如何设置下拉框的选中项

最新推荐文章于 2021-02-22 09:43:09 发布

原创最新推荐文章于 2021-02-22 09:43:09 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

JavaScript学习专栏收录该内容

7 篇文章

订阅专栏

设置下拉框中选中项

当点击设置按钮时，下拉框的默认值会被随机选中。做以下学习记录：
在这里插入图片描述
要完成设置下拉框的选中项，我们要解决以下问题：

给按钮注册事件
获取下拉框中所有的option
随机生成索引
根据索引获取option，并让option选中

解决以上四个问题后，效果便达到了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <input type="button" id="btnSet" value='设置'> 
 <select id="selCities">
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">杭州</option>
  <option value="4">重庆</option>
 </select>
 <script type="text/javascript">
  //给按钮注册事件
  var btnSet = document.getElementById('btnSet');
  btnSet.onclick = function () {
   //获取下拉框中所有option
   var selCities = document.getElementById('selCities');
   var options = selCities.getElementsByTagName('option');
   //随机生成索引
   //Math.random() --> [0,1)
   var randomIndex = parseInt(Math.random()*options.length);
   var option = options[randomIndex];
   //根据索引获取option，并让option选中
   option.selected = true;
  }  
 </script>
</body>
</html>