如何将 selected 值从 select 元素传输到 javascript？

Question

我有一个具有多项选择的 select 元素，如下所示：

<select multiple>
  <option value="en">English</option>
  <option value="de">German</option>
</select>

我有一个 javascript，它应该使用选定的值，看起来像：

$.ajax({
                url: window.location.protocol + "//example.com/search",
                jsonp: "jsonp",
                dataType: "jsonp",
                data: {
                q: querykeyword,
                client: "chrome",
                hl: "HERE SHOULD APPEAR ONE OR TWO SELECTED VALUES"
                }

因此最后一行代码应类似于 hl: "en" 或 hl: "de" 或 hl: ["en","de"].

如何将 select 元素的值传输到 javascript？

Answer 1

您需要从 select 元素中获取 selected 值。您可以通过以下方式做到这一点：document.querySelector("select").value，因此您的代码的完整解决方案将是：

$.ajax({
      url: window.location.protocol + "//example.com/search",
      jsonp: "jsonp",
      dataType: "jsonp",
      data: {
        q: querykeyword,
        client: "chrome",
        hl: document.querySelector("select").value
      });

Answer 2

使用selectedOptions属性.

var selectedOptions = document.querySelector("select").selectedOptions;
var values = [];
for (let i=0; i<selectedOptions.length; i++) {
  values.push(selectedOptions[i].value);
}

.value 将不起作用，因为它只会显示一个选定的选项。

console.log(document.querySelector("select").value)

<select multiple>
  <option value="volvo" selected>Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

如何将 selected 值从 select 元素传输到 javascript？

How to transfer selected values from select element to javascript?

html

javascript

drop-down-menu