I have a select option with multiple optgroups. I want to select multiple values from each group & get values based on the label(of optgroup) on submiting it.
HTML code is
<table> <tr> <td>Select</td> <td> <select multiple="multiple" id="multiGrpSel" "> <optgroup label="Indutry Types" id="types"> <option value="1">Private</option> <option value="2">Public</option> <option value="3">Govt</option> </optgroup> <optgroup label="Unit Category" id="unit"> <option value="1">Micro</option> <option value="2">Small</option> <option value="3">Medium</option> </optgroup> </select> </td> </tr> <tr><th align="center"> <input type="button" id="submit" class="button" value="Submit"> </th></tr> </table>
And on submit
$("#submit").die('click').live('click',function() {
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
console.debug('label='+$(this).parent().attr("label"));
//optgroup id
console.debug('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
console.debug('value='+$('#'+id).val());
});
});
If two options from 1st & 2nd optgroups are selected, I am getting the label & id , but the value are getting as blank.
Output:
label=Unit Category
id=unit
value=
label=Unit Category
id=unit
value=
label=Industry Types
id=types
value=
label=Industry Types
id=types
value=
Actually, you already have access to the values of those selected options, but you are actually trying to get a value from the optgroup
and not from the option
since you used the optgroup's #id
to determine its value, that's why you always get a blank result for the value.
See a working code below:
$("#submit").click(function (){
$('#multiGrpSel').find("option:selected").each(function(){
//optgroup label
var label = $(this).parent().attr("label");
//optgroup id
console.log('id='+$(this).parent().attr("id"));
// values based on each group ??
id = $(this).parent().attr("id");
// gets the value
console.log("label: "+label+" value: "+$(this).val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="multiGrpSel">
<optgroup label="Industry Types" id="types">
<option value="1">Private</option>
<option value="2">Public</option>
<option value="3">Govt</option>
</optgroup>
<optgroup label="Unit Category" id="unit">
<option value="1">Micro</option>
<option value="2">Small</option>
<option value="3">Medium</option>
</optgroup>
</select>
<input type="button" id="submit" value="submit"/>