CODEWITHSUNDEEP
javascriptphphtml
user3752832
user3752832

Reputation: 11

Select all multi-select Option using javascript

I tried to select all options of multi-slect flower[ ] using javascript but nothing happened when I click on submit, please tell what wrong ? 

<html>
    <head>
        <script language="javascript" type="text/javascript">
            $("#submit").click(function() {

                $('#flower option').each(function() {
                    $(this).attr('selected', true);
                });

            });
        </script>
    </head>

    <body>
        <form method="Get" action="#">
            <select name="flower[ ]" id="flower" multiple>
                <option value="flower">FLOWER</option>
                <option value="rose">ROSE</option>
                <option value="lilly">LILLY</option>
                <option value="jasmine">JASMINE</option>
                <option value="lotus">LOTUS</option>
                <option value="tulips">TULIPS</option>
            </select>
            <input type="submit" id="submit" name="submit" value="submit">
        </form>
    </body>

</html>

Upvotes: 0

Views: 160

Answers (5)

hartz89
hartz89

Reputation: 669

You do not specify in your question, but it looks like you are using jQuery. If you do, first make sure that you have placed your code inside of a $(document).ready(function(){...}) block so that you are waiting until the DOM is ready for you to begin attaching event listeners. Also, you shouldn't need the .each(function(){...}) call. Finally, to ensure cross-browser compatibility and to conform to standards, set the selected attribute to 'selected' rather than true. See code below.

$(document).ready(function() {
  $('#submit').click(function() {
    $('#flower option').attr('selected', 'selected');
  });
});



EDIT Actually, it's better to use jQuery's .prop() here, since using .attr() only is only to be used for setting the option's initial state. So...

$(document).ready(function() {
  $('#submit').click(function() {
    $('#flower option').prop('selected', true);
  });
});


More info on this can be found in this question...
Jquery select all values in a multiselect dropdown

Upvotes: 1

Damian Polac
Damian Polac

Reputation: 934

Put your javascript on the end of body or use $(document).ready(). It must be executed when form is already rendered.

You can do it with .val(). $('#flower').val(ARRAY OF VALUES), i.e.

 $('#flower').val(['lilly', 'lotus']);

For selecting all you can use

$('#flower').val($('#flower option').map(function(){
    return $(this).attr('value');
}));

Upvotes: 1

user3291093
user3291093

Reputation:

You are missing:

$(document).ready(function(){

above your script and then close it with:

});

but as mentioned above:

$('#flower option').attr('selected', true);

Should do the trick as well

Upvotes: 2

Yunus Aslam
Yunus Aslam

Reputation: 2466

You must put your javscript click function inside document ready function. Like this

 $(document).ready(function(){
   $("#submit").click(function(e){
      $('#flower option').each(function () {
         $(this).attr('selected', true);
      });
   });
 });

Cheers.. :)

Upvotes: 2

Useless Intern
Useless Intern

Reputation: 1302

$('#flower option').attr('selected', true);

You've already selected all of the options so the each loop is unnecessary.

Upvotes: 1

Related Questions