jquery - Jquery 获取 optgroup 标签及其子标签

Question

它如何box_B根据选择的box_A选项获取 optgroup 的标签名称？

我使用以下功能尝试警告box_A父标签但无法获取它，如果我更改为var label = $(e).attr('value');，则显示选项值。

function showLabel(e){ 
    if($(e).attr('checked')=='checked'){
         var label = $(e).parent().attr('label');
         alert(label);
    }
}

选择框：

<select id="box_A" multiple="multiple">
    <optgroup label="Asia: Japan">
        <option value="1 - Toyota">1 - Toyota</option>
        <option value="2 - Honda">2 - Honda</option>
    </optgroup>
    <optgroup label="Europe: German">
        <option value="3 - Mercedes">3 - Mercedes</option>
    </optgroup>
</select>

<select id="box_B" multiple="multiple">
    <optgroup label="1 - Toyota">
        <option value="1A - Camry">1A - Camry</option>
        <option value="1B - Yaris">1B - Yaris</option>
    </optgroup>
    <optgroup label="2 - Honda">
        <option value="2A - Civic">2A - Civic</option>
    </optgroup>
    <optgroup label="3 - Mercedes">
        <option value="3A - SL320">3A - SL320</option>
    </optgroup>

</select>

调用函数：

$(document).ready(function() {

    $("#box_A").multiSelect({}, showLabel);

}

谢谢。

Answer 1

假设showLabel在单击选项时调用并传递了一个 jQuery 事件对象，您可以使用它：

function showLabel(e){ 
    var $target = $(e.target);
    if($target.is(':selected')){
         var label = $target.closest('optgroup').attr('label');
         alert(label);
    }
}

编辑：

在查看了您发布的插件后，看来我上面的假设是错误的。showLabel没有传递 jQuery 事件，而是传递了单击项目的 jQuery 对象，这也是一个复选框，而不是一个选项。尝试改用这个：

function showLabel($target){ 
    if($target.is(':checked')){
         var label = $target.closest('optgroup').attr('label');
         alert(label);
    }
}