所选表单-当表单的值被选中时，如何更改变量值

selected form - how to change variables value, when value of form is selected

本文关键字：表单 变量值 何更改      更新时间：2023-09-26

当选择不同的选项时，我希望（数字）具有不同的值。例如，当选择1时，数字=1，当选择2时，数字=2，我该如何使用JavaScript？

  <form>
        Select your favorite letter!
        <select id="numbers">
            <option selected disabled>Choose one</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </form>
    <script>
        var number;
    </script>

试试这个：

<form>
    Select your favorite letter!
    <select id="numbers">
        <option selected disabled>Choose one</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</form>
<script>
    var number = document.getElementById("numbers").value;
</script>

您需要的脚本如下所示：

var select = document.getElementById('numbers')
var number;
select.addEventListener('change', function(){
    number = select.value
    alert(number)
})

这在大多数现代浏览器中都有效——如果你需要对旧浏览器的支持，你可能需要polyfill。

请在此处查看小提琴：https://jsfiddle.net/rainb0w/LzL3ybfm/

这是一种快速简单的方法：

<form>
    Select your favorite letter!
    <select id="numbers">
        <option selected disabled value="">Choose one</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</form>
<script>
    var number = document.getElementById("numbers").value;
    document.getElementById("numbers").onchange = function()
    {
        var number = document.getElementById("numbers").value;
    };
</script>

注意，我添加了value=""，这样，如果用户没有选择任何内容，您就可以将变量检测为空，否则number将包含Choose one字符串。

相关文章：