JQuery click event not firing in optgroup
I have the following code: example at jsFiddle
<select>
<optgroup label="Group1">
<option value="11">Option 1</option>
<option value="12">Option 2</option>
</optgroup>
<optgroup label="Group2">
<option value="21">Option 1</option>
<option value="22">Option 2</option>
</optgroup>
</select>â
and some jquery code:
$(document).ready(function() {
$("select optgroup").click(function() {
alert("Clicked " + $(this).attr("label"));
});
It seems pretty straight forward. If I add onclick="javascript:alert(...);"
that seems to work ... except that the click fires no matter what is pressed.
Why doesn't it work?
Thank you for your help!
EDIT
There seems to be a misunderstanding in what I am trying to do here, so I need to expand the code a bit to give a better idea.
What I'm shooting is to do the following:
$(document).ready(function() {
$("select optgroup").children().hide();
$("select optgroup").click(function() {
$(this).children().show();
});
As you can see, capturing the click event on this parameter and then defining the group will not work because all the options will be hidden. I want the options to show when a group (optgroup) is clicked. Having said that, Chrome doesn't seem to respect the group click, and IE only returns the group of the selected item (when the optgroup button is clicked).
source to share
So the short answer to this is, it looks like it's not possible. There is no way to take a normal selection with the Groups option and turn it into a style pick list in harmony where only the options group items are initially shown and clicking an optiongroup item expands its children (options).
It seems that no browser supports clicking on a group item in a select list. While there is an onClick event, the event acts more like you clicked on the selected element.
source to share
$(document).ready(function() {
$("select").change(function() {
var clicked = $(this)
.find('option:selected') // get selected option
.parent() // get that option optgroup
.attr("label"); // get optgroup label
alert( clicked );
});
});
Note
.click()
is the wrong event you are using. see comment
source to share
There is one tricky solution to listen for click events in opt groups when multiple choice is made. The idea is to listen for clicks on the parent of the select and calculate if the user clicked on the optgroup header.
$('#multipleSelectId').click(function(event) {
var y = event.pageY - $(this).offset().top;
var row = Math.floor((y - 4) / 15);
$(this).find('optgroup').each(function() {
if (row == 0) {
onOptgroupClick($(this));
return false;
}
row -= $(this).children().length + 1;
});
});
This approach has been tested in Chromium 30, Firefox 25, IE 9.
I don't know if it can be applied to individual selections, but with "multiple = multiple" it works like a charm.
source to share
You can solve it here with jQuery.
First assign the event to the opt group and see if the distribution was stopped.
$('optgroup').on('click',function(e) {
if(!e.isPropagationStopped()){
if ($(this).find('option:visible').length == $(this).children().length) {
$(this).children().hide();
}
else {
$(this).children().show();
}
}
});
Next, we want to prevent the previous piece of code from running when we click one of the child parameters.
$('optgroup > option').on('click',function(e) {
e.stopPropagation();
$(this).parent().trigger('change');
});
The trigger event, which is called at the end of the function, must ensure that all other assigned triggers in the change event are still fired.
source to share