Question

当您有多选表单字段（如下所示）时，如何获取并设置所选选项值？

<select class="items" multiple="multiple" size="5">
      <option value="apple">apple</option>
      <option value="ant">ant</option>
      <option value="ape">ape</option>
      <option value="age">age</option>
      <option value="boy">boy</option>
      <option value="banana">banana</option>
      <option value="carrot">carrot</option>
</select>

获取价值

   var items = [];
    $('select.items option:selected').each(function() {
        items.push( this.value );
    });

这是获取值数组的唯一方法还是更流畅的方式？

设置值

var items = ['apple', 'ape', 'carrot'];
$.each(items, function() {
    $('select.items option[value="' + this + '"]').prop('selected', true);
});

有更简洁的方法吗？

Answer 1

获取所选值数组非常简单;使用jQuery .val()方法。

var items = $('select.items').val();
//sample result: ["apple","ape","boy","daisy","eagle"]

请注意，适用于其他表单字段的JavaScripts value属性返回只是第一个选定的值

function out( v ) {
     $('pre.out').text( JSON.stringify( v ) );
}

$('select.items').on('change', function() {
    out( $(this).val() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
  <option value="apple">apple</option>
  <option value="ant">ant</option>
  <option value="ape">ape</option>
  <option value="age">age</option>
  <option value="boy">boy</option>
  <option value="banana">banana</option>
  <option value="carrot">carrot</option>
  <option value="cat">cat</option>
  <option value="daisy">daisy</option>
  <option value="desk">desk</option>
  <option value="elephant">elephant</option>
  <option value="eagle">eagle</option>
  <option value="fox">fox</option>
  <option value="fat">fat</option>
  <option value="goat">goat</option>
  <option value="good">good</option>
  <option value="gum">gum</option>
  <option value="hut">hut</option>
  <option value="hop">hop</option>
  <option value="insect">insect</option>
  <option value="ice">ice</option>
  <option value="jump">jump</option>
  <option value="kite">kite</option>
  <option value="lamp">lamp</option>
  <option value="lap">lap</option>
  <option value="monkey">monkey</option>
  <option value="mat">mat</option>
  <option value="nature">nature</option>
  <option value="nose">nose</option>
  <option value="owl">owl</option>
  <option value="pocket">pocket</option>
  <option value="pick">pick</option>
  <option value="quote">quote</option>
  <option value="rabbit">rabbit</option>
  <option value="run">run</option>
  <option value="soft">soft</option>
  <option value="sit">sit</option>
  <option value="table">table</option>
  <option value="toy">toy</option>
  <option value="understand">understand</option>
  <option value="vote">vote</option>
  <option value="winter">winter</option>
  <option value="xmas">xmas</option>
  <option value="yes">yes</option>
  <option value="zoo">zoo</option>
</select>
<pre class="out"></pre>

设置所选值也不需要循环。使用相同的jQuery .val()方法。

$('select.items').val( ['apple','ape','boy','age','eagle'] );

$('button.set').on('click', function() {
    $('select.items').val( ['apple','ape','boy','age','eagle'] );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <select class="items" multiple="multiple" size="5">
      <option value="apple">apple</option>
      <option value="ant">ant</option>
      <option value="ape">ape</option>
      <option value="age">age</option>
      <option value="boy">boy</option>
      <option value="banana">banana</option>
      <option value="carrot">carrot</option>
      <option value="cat">cat</option>
      <option value="daisy">daisy</option>
      <option value="desk">desk</option>
      <option value="elephant">elephant</option>
      <option value="eagle">eagle</option>
      <option value="fox">fox</option>
      <option value="fat">fat</option>
      <option value="goat">goat</option>
      <option value="good">good</option>
      <option value="gum">gum</option>
      <option value="hut">hut</option>
      <option value="hop">hop</option>
      <option value="insect">insect</option>
      <option value="ice">ice</option>
      <option value="jump">jump</option>
      <option value="kite">kite</option>
      <option value="lamp">lamp</option>
      <option value="lap">lap</option>
      <option value="monkey">monkey</option>
      <option value="mat">mat</option>
      <option value="nature">nature</option>
      <option value="nose">nose</option>
      <option value="owl">owl</option>
      <option value="pocket">pocket</option>
      <option value="pick">pick</option>
      <option value="quote">quote</option>
      <option value="rabbit">rabbit</option>
      <option value="run">run</option>
      <option value="soft">soft</option>
      <option value="sit">sit</option>
      <option value="table">table</option>
      <option value="toy">toy</option>
      <option value="understand">understand</option>
      <option value="vote">vote</option>
      <option value="winter">winter</option>
      <option value="xmas">xmas</option>
      <option value="yes">yes</option>
      <option value="zoo">zoo</option>
    </select>
    <button class="set">SET</button>

在多选表单字段上获取或设置值

1 个答案: