取得多个下拉框的值
### 使用JavaScript获取多个下拉框的值 在Web开发中,获取用户输入是十分常见的需求之一,特别是当涉及到表单元素如下拉框时。本文将详细介绍如何通过JavaScript来实现获取页面上多个相同名称(name属性)的下拉框的选中值,并统计这些值出现的次数。 #### 代码解析 我们来看一下提供的HTML代码片段: ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> select { width: 70px; height: 20px; } </style> <script type="text/javascript"> function sss() { var daren = 0; var zi = 0; var xiao = 0; var name1Len = document.getElementsByName("name1"); for (var i = 0; i < name1Len.length; i++) { // 注意这里的循环条件应为 i < name1Len.length var value = name1Len[i].value; alert(value); if (value == null || value == '' || value == undefined || value == '0') { continue; // 如果值为空或为0,则跳过本次循环 } else if ('1' == value) { daren = daren + 1; } else if ('2' == value) { zi = zi + 1; } else { xiao = xiao + 1; } } } </script> </head> <body> <select name="name1" class="passengerclientType"> <option value="1">hello_1</option> <option value="2">hello_2</option> <option value="3">hello_3</option> </select> <select name="name1" class="passengerclientType2"> <option value="1">hello_1</option> <option value="2">hello_2</option> <option value="3">hello_3</option> </select> <select name="name1" class="passengerclientType3"> <option value="1">hello_1</option> <option value="2">hello_2</option> <option value="3">hello_3</option> </select> <input type="button" id="btnId" value="aaaaaaaaa" onclick="sss();"> </body> </html> ``` #### 分析与改进 1. **DOM选择器**: - `document.getElementsByName("name1")`:这个方法返回一个NodeList对象,它包含了所有具有`name1`名称的元素。注意这里返回的是一个类似数组的对象,而不是真正的数组。 2. **循环遍历**: - 使用`for`循环遍历所有的`<select>`元素。 - 获取每个`<select>`元素的`value`属性,即当前选中的选项的值。 3. **值处理**: - 对于每个`value`,进行逻辑判断,分别统计`1`、`2`和`3`的出现次数。 - 该代码中还包含了一个判断条件,用来排除未选择的选项(值为`null`、空字符串、`undefined`或`0`的情况)。 4. **改进点**: - 循环条件应为`i < name1Len.length`而非`i <= name1Len.length`,以避免访问越界。 - 代码中的注释和格式化可以进一步优化,增加可读性。 - 可以考虑使用更现代的JavaScript特性(如ES6+)来简化代码结构。 #### 总结 通过上述分析,我们可以看出这段代码的主要目的是统计具有相同名称的多个下拉框中特定值被选中的次数。这种方式适用于需要收集用户选择数据的应用场景,比如问卷调查、用户偏好设置等。同时,通过优化代码结构和逻辑,可以使程序更加健壮和易于维护。