5

我有以下代码 - 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();
   });

如您所见，在选项上捕获单击事件然后确定组将不起作用，因为选项将全部隐藏。我希望在单击组 (optgroup) 时显示选项。话虽如此，Chrome 似乎并不尊重对组的单击，IE 仅返回所选项目的组（当您单击 optgroup 时）项目。

4

5 回答 5

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

演示

笔记

.click()是您使用的错误事件。见评论

于 2012-07-19T17:08:11.747 回答
0

有一种复杂的解决方案允许您在多选中侦听 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”它就像一个魅力。

于 2013-11-14T17:43:46.237 回答
0

这是使用 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');
});

在函数末尾调用的“触发器”事件是为了确保更改事件上的任何其他已分配触发器仍然被触发。

于 2015-11-04T05:24:50.323 回答
0 
<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>
于 2016-12-30T19:46:58.747 回答
-1

因此，对此的简短回答似乎是这是不可能的。无法使用 optionGroups 进行普通选择并将其转换为手风琴样式的选择列表，其中最初仅显示选项组项目，单击选项组项目会展开其子项（选项）。

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

于 2012-07-20T13:05:46.370 回答