Jquery get label of OPTGROUP of select option
You're missing the #
in the ID selector.
$('#sector_select').change(function ()
{
// ↓
var label=$('#sector_select :selected').parent().attr('label');
console.log(label);
});
You've also got a spurious </a>
tag in
<option value='' selected='selected'>All Sectors</a>
The style could use some improvement, after that:
$('#sector_select').on('change', function ()
{
var label = $(this.options[this.selectedIndex]).closest('optgroup').prop('label');
console.log(label);
});
This will still log undefined
for the <option>
which is not in an <optgroup>
; how you handle that scenario is up to you. Demo: http://jsfiddle.net/mattball/fyLJm/
just wondering if you can write up a function that takes whatever select element id and returns optgroup label of selected item. the 'this' confuses me within the $(). a function i can use outside the onchange event
function logOptgroupLabel(id)
{
var elt = $('#'+id)[0];
var label = $(elt.options[elt.selectedIndex]).closest('optgroup').prop('label');
console.log(label);
}
$('#sector_select').on('change', function () {
logOptgroupLabel(this.id);
});
Related videos on Youtube
Comments
-
Sir Lojik almost 4 years
I am trying to find the value of the optgroup label of currently selected option in a select control. below is some html to show what im trying to do.
<select id='sector_select' name='sector_select' data-placeholder="Select Sector..." style="width:200px;" class="chzn-select"> <option value='' selected='selected'>All Sectors</a> <optgroup label="Consultancy Services"> <option value='Employment placement/ recruitment'>Employment placement/ recruitment</option> </optgroup> <optgroup label="Supplies"> <option value='Food, beverages and related products'>Food, beverages and related products</option> </optgroup> </select> <script type="text/javascript"> $('#sector_select').change(function () { var label=$('sector_select :selected').parent().attr('label'); console.log(label); }); </script>
the above code gives undefined because its reading parent of select element other than option. any ideas?
-
Sir Lojik about 12 yearsremoved the </a>, i got this when i ran the code, Uncaught TypeError: Object #<Object> has no method 'prop'
-
Matt Ball about 12 yearsAre you using jQuery <1.6? api.jquery.com/prop If so, use
.attr()
instead. -
Sir Lojik about 12 yearsjust wondering if you can write up a function that takes whatever select element id and returns optgroup label of selected item. the 'this' confuses me within the $(). a function i can use outside the onchange event
-
Sir Lojik about 12 yearsfor some reason jsfiddle is taking forever(server busy), could u edit ur answer and paste it there pliz