JavaScript获取下拉列表与单选按钮的值

在JavaScript中，处理下拉列表单选按钮的值是一个常见的操作，尤其是在前端开发中。本篇文章主要介绍如何通过JavaScript来获取HTML中的`<select>`（下拉列表）和`<input type="radio">`（单选按钮）元素的值和选中文本。 首先，我们来看`<select>`元素的处理。HTML代码中定义了一个名为`myselect`的下拉列表，包含三个选项：1、2和3。在JavaScript中，有两个函数被定义来分别获取选中项的文本和值： 1. `getSelectedText(name)`函数： - 这个函数的作用是获取指定`name`属性的`<select>`元素中选中的`<option>`标签的文本。它通过`getElementById`方法找到对应的元素，并遍历所有`<option>`，当发现`selected`属性为`true`时，返回该选项的`innerText`，即选中的文本。 2. `getSelectedValue(name)`函数： - 这个函数则获取选中`<option>`的`value`属性值。与`getSelectedText`类似，它也是通过`getElementById`找到对应的`<select>`，然后直接返回选中`<option>`的`value`。 在页面上，有两个按钮，一个用于调用`getSelectedText`显示选中的文本，另一个用于调用`getSelectedValue`显示选中的值。当用户点击相应的按钮时，会弹出一个警告框，显示所获取的值或文本。 接下来，对于`<input type="radio">`元素，处理方式略有不同。假设有一个名为`oper`的单选按钮组，代码没有直接给出，但通常可以通过以下方式获取选中的单选按钮值： - 对于单个单选按钮，可以直接使用`document.getElementById("oper").value`来获取选中的值，如果只有一个单选按钮且已选中，则此语句可以直接得到结果。 - 如果有多个同名的单选按钮（`<input type="radio" name="oper">`），那么需要使用`document.getElementsByName('oper')`来获取一个`HTMLCollection`对象，然后遍历这个集合，找到`checked`属性为`true`的单选按钮，其`value`即为选中值。 总结来说，JavaScript提供了一套完整的API来操作HTML中的下拉列表和单选按钮，通过`getElementById`或`getElementsByName`等方法，可以方便地获取它们的选中值和文本。这些基础操作在构建动态网页交互时非常实用。