Get or Set Value(s) on A Multi-select Form Field

Question

When you have a multi-select form field such as the following, how do you get, and set the selected option values?

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

Getting the value(s)

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

Is this the only way to get the array of values or is there a sleeker way?

Setting the value(s)

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

Is there a sleeker way to do this?

Answer 1

It's quite straight-forward to get the selected values array; use the jQuery .val() method.

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

Please note that JavaScripts value property, which works well for other form fields, returns just the first selected 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> 

To set the selected values also requires no looping. Use the same jQuery .val() method.

$('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>