select-all options in a optgroup

Question

I have a parent option list as shown below , all I want to do is when user select the parent option all the child options should be selected. how can I do that ? Is it possible to give the all child values in the parent option ?

 <html><head>
    <style type="text/css">
    .optionGroup
    {
        font-weight:bold;
        font-style:italic;
    }

.optionChild
{
    padding-left:15px;
}
 </style>
</head>
<body>
<select multiple="multiple">
      <option value="Parent0" class="optionGroup">Parent Tag</option>
      <option value="child1" class="optionChild">Child Tag</option>
      <option value="child2" class="optionChild">Child Tag</option>
</select>

</body>
</html>

Answer 1

Yes, there are many ways to do that, but if the list is big, it's quite a bit of work. If you are able to change the source, there is an easier way.

<select multiple="multiple">
   <option value="Parent0" class="optionGroup parent0">
   <option value="child2" class="optionGroup parent0">
   <option value="child1" class="optionGroup parent0">
   <option value="Parent1" class="optionGroup parent1">
   <option value="child2" class="optionGroup parent1">
   <option value="child1" class="optionGroup parent1">
</select>

Now, you simply select every option that has the same class as the parent (parent0, parent1) etc. This would be much easier with jQuery. Are you using only javascript?

Answer 2

I think it is better if you use a tree selection instead of a multiselect for your requirement. please check below link for example https://code.google.com/p/dynatree/

select-all options in a optgroup

Question

2 answers

solution1
0 ACCPTED 2014-11-10 05:48:22

solution2
0 2014-11-10 05:52:05

select-all options in a optgroup

Question

2 answers

solution1 0 ACCPTED 2014-11-10 05:48:22

solution2 0 2014-11-10 05:52:05

solution1
0 ACCPTED 2014-11-10 05:48:22

solution2
0 2014-11-10 05:52:05