Select all child elements after clicking on OPTGROUP

Question

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>

This question may shed some light: http://stackoverflow.com/questions/9892247/selectable-optgroup-in-html-select-tag — bloodyKnuckles, Apr 03 '15 at 12:54
try using $(e.currentTarget).children()... instead of $(this).children()...? — Stephen Raghunath, Apr 03 '15 at 12:56

score 3 · Accepted Answer · answered Apr 03 '15 at 12:56

3

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

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

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

answered Apr 03 '15 at 12:56

Brijesh Bhatt

3,810
3
18
34

Select all child elements after clicking on OPTGROUP

1 Answers1