JS获取select的value和text值的简单实例

在JavaScript中，获取``元素的`value`属性和通过`options`集合来找到对应的`text`。以下是一个简单的实例：


<!DOCTYPE html>
<html>
<head>
    <title>Select Example</title>
</head>
<body>

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3" selected>Option 3</option>
  <option value="4">Option 4</option>
</select>

<button onclick="getValueAndText()">Get Value and Text</button>

<script>
function getValueAndText() {
    // 获取select元素
    var selectElement = document.getElementById("mySelect");
    
    // 获取选中的value
    var value = selectElement.value;
    
    // 获取选中的text，需要遍历options
    var options = selectElement.options;
    for (var i = 0; i < options.length; i++) {
        if (options[i].value === value) {
            var text = options[i].text;
            break;
        }
    }
    
    // 输出结果
    alert("Value: " + value + ", Text: " + text);
}
</script>

</body>
</html>

在这个例子中，我们有一个``元素的引用，然后读取其`value`属性来获取选中的值。为了获取选中的文本，它遍历`