javascript - 如何将选定的值从选择元素传输到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

使用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>