Question

I need to append all the selected items from a form to an array and store/use it else where in the form. I also need to grab the non-selected elements as well and place that in an array.

      <select multiple id="conditionBad" name="conditionBad">
        <option class="checker" value="Door">Door</option>
        <option class="checker" value="Light">Light</option>
        <option class="checker" value="Keypad">Keypad</option>
        <option class="checker" value="Cooking Cavity">Cooking Cavity</option>
        <option class="checker" value="Seal">Seal</option>
        <option class="checker" value="Power Cord">Power Cord</option>
        <option class="checker" value="Turn Table">Turn Table</option>
        <option class="checker" value="Grille">Grille</option>
      </select>

Basically, I need a jQuery call that can grab the values of the selected items and place them each into an array or even a string seperated by a comma (‘,’) will do for me. I’m not sure of a function that can do this, and I’ve tried looking through stackoverflow for a solution. Any help would be appreciated.

Answer 1

You can use map.

Live Demo

var values = $('#conditionBad option').map(function(){
     return this.value;
}).get().join();

For selected

var values = $('#conditionBad option:selected').map(function(){
     return this.value;
}).get().join();

For not selected

var values = $('#conditionBad option').map(function(){
     if(!$(this).is(':selected'))
        return this.value;
}).get().join();