Question

我有以下代码 - example on 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>

和一些jquery代码：

$(document).ready(function() {
$("select optgroup").click(function() {
    alert("Clicked " + $(this).attr("label"));            
});

这看起来非常简单。如果我添加似乎有效的onclick="javascript:alert(...);" ...，无论点击什么点击都会点击。

为什么这不起作用？

感谢您的帮助！

修改

似乎我在这里尝试做的事情存在误解，所以我需要稍微扩展代码以提供更好的想法。

我正在拍摄的是能够做到以下几点：

$(document).ready(function() {
   $("select optgroup").children().hide();
   $("select optgroup").click(function() {
      $(this).children().show();
   });

正如您所看到的，在选项上捕获click事件然后确定该组将不起作用，因为所有选项都将被隐藏。我想要单击组（optgroup）时显示的选项。话虽如此，Chrome似乎并不尊重群组上的点击，IE只会返回所选项目的组（当您点击选项组时）。

Answer 1

$(document).ready(function() {
    $("select").change(function() {
        var clicked = $(this)
                         .find('option:selected') // get selected option
                         .parent()   // get that option's optgroup
                         .attr("label");   // get optgroup's label

        alert( clicked );
    });
});

<强> DEMO

注意

.click()是您正在使用的错误事件。见comment

Answer 2

有一个复杂的解决方案允许您在多个选择中侦听optgroup上的点击事件。这个想法是在父选择项上监听点击，并计算用户是否点击了optgroup标题。

$('#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; 
    });
});

此方法已在Chromium 30，Firefox 25，IE 9中进行了测试。

我不知道它是否可以应用于单个选择，但是使用“multiple = multiple”它就像魅力一样。

Answer 3

以下是使用jQuery解决问题的方法。

首先将事件分配给optgroup，然后查看传播是否已停止。

$('optgroup').on('click',function(e) {
    if(!e.isPropagationStopped()){
        if ($(this).find('option:visible').length == $(this).children().length) {
            $(this).children().hide();
        }
        else {
            $(this).children().show();
        }
    }
});

接下来，我们希望在单击其中一个子选项时阻止上一段代码触发。

$('optgroup > option').on('click',function(e) {
    e.stopPropagation();
    $(this).parent().trigger('change');
});

＆＃34;触发＆＃34;在函数结束时调用的事件是确保仍然触发change事件上的任何其他已分配触发器。

Answer 4

<select>
<optgroup onclick="$(this).children().toggle();">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</optgroup>
</select>
<script>
    $( "option" ).click(function( event ) {
      event.stopPropagation();
    }); 
</script>

Answer 5

所以对此的简短回答似乎是这是不可能的。使用optionGroups进行正常选择并将其转换为手风琴风格的选择列表是不可能的，最初只显示选项组项目，单击选项组项目会扩展其子项（选项）。

似乎没有浏览器真正支持单击选择列表中的组项。虽然有一个onClick事件，但事件的行为更像是您点击了所选项目。

jQuery单击事件未在optgroup上触发

5 个答案:

注意