Looping through selected values in multiple select combobox JQuery

I have the following scenario.

I have a combobox where multiple selection is available.

                <select id="a" multiple="multiple">
                    <opti开发者_JAVA百科on value="">aaaa</option>
                    <option value="">bbbb</option>
                    <option value="">cccc</option>
                    <option value="">dddd</option>
                </select>

Now I also have a button

<button type="button" id="display">Display</button>

When a user clicks on this button, it should list all the selected values of the dropdown in an alert box

My JS code looks as follows

  $(document).ready(function() {
                $('#display').click(function(){
                    alert($('#a').val());
                });


        });

Any pointers will be appreciated

You have to find all the selected options:

jQuery(function($) {
    $('#display').click(function() {
        $('#a > :selected').each(function() {
            alert($(this).text());   // using text() here, because the 
        });                          // options have no value..?
    });
});

The manual, as Pim pointed out, is useful:

The .val() method is primarily used to get the values of form elements. In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option.

So, the above should work, but jQuery already does this behind the scenes for you, so this is much easier:

alert($('#a').val().join(", "));

If it's not working for you, it might be because of the fact that your options don't seem to have a value.

The jQuery page documenting the .val() function literally tells you what to do: http://api.jquery.com/val/

Have you tried each()?

On following demo bins, i have done stuff for above issue.

Demo: http://codebins.com/bin/4ldqp9w

HTML:

<select id="a" multiple="multiple">
  <option value="">
    aaaa
  </option>
  <option value="">
    bbbb
  </option>
  <option value="">
    cccc
  </option>
  <option value="">
    dddd
  </option>
  <option value="">
    eeee
  </option>
  <option value="">
    ffff
  </option>
  <option value="">
    gggg
  </option>
</select>
<div id='result'>
</div>

<p>
  <button type="button" id="display">
    Display
  </button>
</p>
<p>
  <button type="button" id="reset">
    Reset
  </button>
</p>

CSS:

#a{
  display:inline-block;
}
#result{
  display:inline-block;
}

JQuery:

$(document).ready(function() {
    $('#display').click(function() {

        var result = '';
        $('#a > :selected').each(function() {
            result += "<div>" + $(this).text() + "</div>";
        });
        if (result == "") {
            result = "<div>Please select any option(s)..!</div>";
        }
        $("#result").html(result);

    });
    $('#reset').click(function() {
        $('#a > :selected').each(function() {
            $(this).removeAttr('selected');
        });
        $("#result").html('');

    });
});