小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前文学习了 JavaScript 表单对象的 单选框和复选框, 本文继续来学习 JavaScript 的表单对象中的另一个用到比较多的元素, 下拉菜单的使用. 在各个网站中均比较常见: 省市级联动, 选择日期 , 选择尺码等等
JavaScript 表单对象
JavaScript 表单通常用来搜集信息: 比如登录, 填报信息等.
HTML
<form>元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
表单对象 下拉菜单
在 JavaScript 表单设计中, 下拉菜单是表单的不可或缺的元素之一. 在浏览器对象中, 可以将下拉菜单看成是一个 select 对象.
每一个 select 对象表示一个 HTML 下拉列表, 其内容可供选择, 选择后确定其值是什么.
可以通过 <select> 标记来创建, 一个标签元素对应创建一个 下拉菜单对象. 通过 elements[] 数组访问其具体的值.
也可以通过 document.getElementById() 来选中.
select 对象和 <select> 元素标记的属性一样
看个小例子:
通过获取 下拉列表这个对象, 可以获取其值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="">
<select name="mySelect" id="mySelect">
<option>HTML</option>
<option>CSS</option>
<option>SCSS</option>
<option>JavaScript</option>
<option>Vue</option>
<option>React</option>
</select>
</form>
<button onclick="showIndex()">显示选择下拉框内容的序号</button>
<script>
function showIndex() {
let x = document.getElementById('mySelect')
alert('选中的内容下标Wie: ', x.selectedIndex)
}
</script>
</body>
</html>
