js获取当前select 元素值的代码

获取select元素的值在JavaScript中是一项非常基础和常见的任务。以下是详细的步骤和示例来演示如何获取当前select元素的值。

步骤一：获取select元素的引用

我们需要先通过JavaScript获取select元素的引用，以便后续操作。这可以通过以下代码实现：

let selectElement = document.getElementById("select-id");

其中，select-id为目标select元素的id属性值，通过使用document.getElementById()方法，我们可以获取到该元素的引用。

步骤二：获取select元素的当前值

接下来，我们需要获取当前选择的选项值。我们可以使用以下代码获取当前选中选项的value值：

let selectValue = selectElement.value;

其中，selectElement是步骤一中获取的select元素的引用，我们使用value属性获取当前选中选项的值。

示例一：输出当前选项的值

以下是一个示例，将当前选项的值输出到控制台：

<select id="select-id" onchange="handleChange()">
   <option value="apple">Apple</option>
   <option value="banana">Banana</option>
   <option value="orange">Orange</option>
</select>

<script>
    function handleChange() {
        let selectElement = document.getElementById("select-id");
        let selectValue = selectElement.value;
        console.log(selectValue);
    }
</script>

上面的代码将一个名为select-id的select元素输出到HTML页面中，当用户在选项上进行选择时，它将调用handleChange()函数，在此函数中我们获取当前选择的值并将其输出到浏览器的控制台中。

示例二：将当前选项的值插入到HTML页面中

以下是另一个示例，将当前选项的值插入到HTML页面中：

<select id="select-id" onchange="handleChange()">
   <option value="apple">Apple</option>
   <option value="banana">Banana</option>
   <option value="orange">Orange</option>
</select>

<p id="output"></p>

<script>
    function handleChange() {
        let selectElement = document.getElementById("select-id");
        let selectValue = selectElement.value;
        let outputElement = document.getElementById("output");
        outputElement.innerHTML = "You selected: " + selectValue;
    }
</script>

此示例与上一个示例非常相似，但这次我们将当前选项的值插入到页面的p元素中，而不是输出到控制台。

通过以上两个示例，我们可以看到，获取当前select元素的值是一个非常基础和常见的任务，并且可以轻松地实现。