javascript - 一次从多个选择字段中获取所选选项的值

Question

假设有 x 个选择字段(x 的值不是一成不变的)。我想使用 jQuery(或 vanilla JavaScript)获取每个选择字段的所选选项的值。

我的方法:

var cars = $(".select").find("option:selected").val();
$(".select").on("click", function() {
  $(".show-value").html("value: " + cars);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>
<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>
<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>
<div class="show-value"></div>

这是给出第一个val()。只有-我想要一个数组。有趣的事实 - 当我将 val() 更改为 text() 时，它将毫无问题地获取 3 个“文本值”。这是为什么？

Answer 1

首先，当页面加载时，您只是从第一个找到的选定 option(即从第一个 select)读取值。这就是为什么值似乎永远不会改变的原因。您需要在 select 上触发 change 事件时读取该值。

其次，不要在select 元素上使用click 事件。使用我上面提到的 change。这是出于可访问性原因。它也仅在进行更改时触发，而不是每次打开/关闭选项列表时触发。

第三，您可以直接在select 上调用val() 来获取它的值。您不需要使用 find('option:selected')。

最后，如果您想要一个 select 值的数组，您可以使用 map() 来构建它:

var $selects = $(".select");
$selects.on("change", function() {
  var cars = $selects.map(function() {
    return $(this).val();
  }).get();
  
  $('.show-value').text(cars.join(', '));
  console.log(cars);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>

<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>

<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>

<div class="show-value"></div>