Question

想象一下，有x个选择字段（x的值不是一成不变的）。我想使用jQuery（或香草JavaScript）获取每个选择字段的selected选项的值。

我的方法：

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）中读取值。这就是为什么值永远不会改变的原因。在change上触发select事件时，您需要读取该值。

第二，不要在click元素上使用select事件。如上所述，请使用change。这是出于可访问性的原因。只会在进行更改时触发，而不是在每次打开/关闭选项列表时触发。

第三，您可以直接在val()上调用select以获取其值。您无需使用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>

Answer 2

尝试一下：您可以在选择框的更改事件上创建值并推送到地图中

$(".select").on("change", function() {
   var cars = $(".select").find("option:selected").map(function() {
    return $(this).val();
   }).get().join();
   $(".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>

Answer 3

$(".select").on("change", function() {
  $(".show-value").html("value: " + $(this).val());
});

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

Answer 4

您也可以使用它。

 $( ".select" ).each(function( index ) {
      console.log( index + ": " + $( this ).val() );
    });
//this will return all of the dropdown selected values

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

4 个答案: