Select all multi-select Option using javascript

Question

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>

Are there any error messages? Also note you may be refreshing the page when you submit a form, clearing changes made to the page. Try doing event.preventDefault() and give your function an event parameter. Also try doing a test case, for example do console.log() in the functions you thing are not working, to check they are being ran. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jun 18, 2014 at 14:25

Yunus Aslam · Accepted Answer · 2014-06-18 14:06:38Z

2

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.. :)

edited Jun 18, 2014 at 14:06

user3291093

answered Jun 18, 2014 at 14:05

Yunus Aslam

2,4764 gold badges28 silver badges43 bronze badges

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

Comments

user3291093 · Accepted Answer · 2014-06-18 14:10:52Z

2

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

answered Jun 18, 2014 at 14:10

user3291093

Comments

Useless Intern · Accepted Answer · 2014-06-18 14:00:31Z

1

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

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

answered Jun 18, 2014 at 14:00

Useless Intern

1,3021 gold badge10 silver badges21 bronze badges

4 Comments

Monarch Wadia Over a year ago

The OP may want to research how jQuery works, once you grasp why this answer is correct, jQuery will really 'click' for you :-) no pun intended!

Useless Intern Over a year ago

How so? We can;t debug with phrases like "It's broken pls fix"

cookie monster Over a year ago

"I tried to select all options of multi-slect flower[ ] using javascript but nothing happened when I click...". You're telling him that he already selected them, but he's saying nothing happens when he clicks. The reason for it is that the handler is never bound.

Useless Intern Over a year ago

Ah yes because it's binding on something that doesn't exist yet. Oh well other people took care of it.

Damian Polac · Accepted Answer · 2014-06-18 14:13:51Z

1

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');
}));

answered Jun 18, 2014 at 14:13

Damian Polac

9349 silver badges20 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:57:35Z

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

Collectives™ on Stack Overflow

Select all multi-select Option using javascript

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related