在多選表單字段上獲取或設置值

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>