CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
jureispro
jureispro

Reputation: 1402

Select all child elements after clicking on OPTGROUP

I want to select all child elements of OPTGROUP when user clicks on OPTGROUP inside Select box. But for some reason my code is not working. Click event on OPTGROUP is not triggering.

Since it's multiselect element I am using Bootstrap Multiselect plugin

Here is my code:

$("optgroup.opt_group").select(function(e) {
    $(this).children().attr('selected', 'selected');
});

<select id="example19" multiple="multiple">
    <optgroup label="Mathematics" class="opt_group">
        <option value="analysis"> Analysis</option>
        <option value="algebra">Linear Algebra</option>
        <option value="discrete"> Discrete Mathematics</option>
        <option value="numerical">Numerical Analysis</option>
        <option value="probability"> Probability Theory </option>
    </optgroup>
    <optgroup label="Computer Science" class="opt_group">
        <option value="programming"> Introduction to Programming</option>
        <option value="automata">Automata Theory</option>
        <option value="complexity"> Complexity Theory</option>
        <option value="software">Software Engineering</option>
   </optgroup>
</select>

Upvotes: 1

Views: 2201

Answers (1)

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

It is because you are not using click event try this:

$("optgroup.opt_group").click(function(e) {

      $(this).children().attr('selected','selected');
    });

Upvotes: 3

Related Questions