jquery select multiple problem

Question

  <select name="garden" multiple="multiple">
    <option>Flowers</option>
    <option selected="selected">Shrubs</option>

    <option>Trees</option>
    <option selected="selected">Bushes</option>
    <option>Grass</option>
    <option>Dirt</option>
  </select>



 $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          alert(str);
        })

Its supposed to alert the option of the selected options like "Grass Dirt Bushes"

Instead i am getting blank.

By "getting blank", do you mean that the alert dialog is blank or that the code is not running at all? Because your code seems to run fine: jsbin.com/atiba (jsbin.com/atiba/edit). Are you sure you put your JavaScript in the right place? — brianpeiris
– brianpeiris, Commented Oct 10, 2009 at 1:52

Eli · Accepted Answer · 2009-10-09 22:05:38Z

1

This will work:

<script>
$(function(){
  $("select").change(function () {
          var str = $(this).children('option[selected]').text();
          alert(str);
        })
});
</script>

No need to do it for each option, just take the relevant options as children of the select, and text() will concatenate all that match.

edited Oct 9, 2009 at 22:05

answered Oct 9, 2009 at 21:57

Eli

100k21 gold badges81 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mottie · Accepted Answer · 2009-10-10 01:32:05Z

1

There is an easier way to do this with $('select').val()

<script type="text/javascript">
$(document).ready(function(){
 alert ($("select").val());
 $("select").change(function () {
  var str = $("select").val();
  alert(str);
 })
})
</script>

The results are separated by commas, so the initial alert will show Shrubs,Bushes

answered Oct 10, 2009 at 1:32

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

1 Comment

brianpeiris Over a year ago

Actually the result of $('select').val() is an array. alert() just calls the toString() method, which joins the results with a comma. So you can do alert($('select').val().join(' ')) to duplicate the questioner's code.

Collectives™ on Stack Overflow

jquery select multiple problem

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related