使用 JavaScript 获取 Selected 选项的值

Question

如何使用 JavaScript 从下拉列表中获取 selected 值？

我尝试了方法一击：

                   <div class="form-group">
                        <select class="form-control" id="naan" name="naan">
                            <option selected="selected" disabled="disabled" value="">Choose Naan</option>
                            <option value="No Naan" style="font-size: 14px">No Naan</option>
                            <option value="Naan"  style="font-size: 14px">Naan</option>
                            <option value="Garlic Naan" class="red">Garlic Naan +.00</option>
                            <option value="Roti"  style="font-size: 14px">Roti</option>
                        </select>
                    </div>

                   var e = document.getElementById("naan");
                   var strUser = e.options[e.selectedIndex].value;
                   console.log('You selected: ', strUser);

当我点击select框到select选项时，只有select是第一个选项。它returns“选择馕”。如果我删除第一个选项，那么它 returns “No Naan” 而不是我 select.

的值

Answer 1

您的 strUser 似乎是直接从页面本身调用的；因此，它仅在呈现页面时设置（并且用户尚未做出选择）。您想要做的是运行值更改时调用的函数内的这段代码。

例如，您可以将此添加到 e.onchange 的函数中：

var e = document.getElementById("naan");
e.onchange = function() {
  var strUser = e.options[e.selectedIndex].value; console.log('You selected: ', strUser);
}

<div class="form-group">
  <select class="form-control" id="naan" name="naan">
    <option selected="selected" disabled="disabled" value="">Choose Naan</option>
    <option value="No Naan" style="font-size: 14px">No Naan</option>
    <option value="Naan" style="font-size: 14px">Naan</option>
    <option value="Garlic Naan" class="red">Garlic Naan +.00</option>
    <option value="Roti" style="font-size: 14px">Roti</option>
  </select>
</div>

Answer 2

您可以通过 change 事件捕获所选选项的值。在下面的示例中，这是通过将 onchange="getSelectedValue(event)" 添加到 select 元素来完成的。

function getSelectedValue(e) {
  console.log(e.target.value);
}

<div class="form-group">
  <select class="form-control" id="naan" name="naan" onchange="getSelectedValue(event)">
    <option selected="selected" disabled="disabled" value="">Choose Naan</option>
    <option value="No Naan" style="font-size: 14px">No Naan</option>
    <option value="Naan" style="font-size: 14px">Naan</option>
    <option value="Garlic Naan" class="red">Garlic Naan +.00</option>
    <option value="Roti" style="font-size: 14px">Roti</option>
  </select>
</div>

Answer 3

添加事件侦听器并检查目标节点值以获取输入值...

<div class="form-group">
  <select class="form-control" id="naan" name="naan">
    <option selected="selected" disabled="disabled" value="">
      Choose Naan
    </option>
    <option value="No Naan" style="font-size: 14px">No Naan</option>
    <option value="Naan" style="font-size: 14px">Naan</option>
    <option value="Garlic Naan" class="red">Garlic Naan +.00</option>
    <option value="Roti" style="font-size: 14px">Roti</option>
  </select>
</div>

<script>
  var e = document.getElementById("naan");

  //   Add add an EventListener and check the value in the target node...
  e.addEventListener("change", function (event) {
    console.log(event.target.value);
  });
</script>

使用 JavaScript 获取 Selected 选项的值

Get the value of the Selected option with JavaScript

javascript

html-select