jQuery 获取父级 optgroup答案

【问题标题】：jQuery get parent optgroupjQuery 获取父级 optgroup
【发布时间】：2017-02-07 22:34:16
【问题描述】：

我想检测选择选项是否在“国际”选项组下。现在我的方法是从所选项目中检测最近的 optgroup，并获取其标签属性的内容。我可以测试那个字符串中的“国际”这个词。其他方法更受欢迎。

如您所知，不幸的是 optgroup 没有包装子选项：

<select id="venue">
    <optgroup label="New England"></optgroup>
        <option value="1">&nbsp;NH</option>
        <option value="2">&nbsp;ME</option>
        <option value="3">&nbsp;VT</option>
        <option value="4">&nbsp;MA</option>   
        <option value="4">&nbsp;CT</option>   
        <option value="4">&nbsp;RI</option>   
    <optgroup label="International"></optgroup>
        <option value="100">Canada</option>
        <option value="100">Texas</option>
        <option value="100">Mexico</option>
</select>

我一直在使用的 jQuery 显然无法正常工作，但你可以看到我想要达到的目标：

dropdownval = jQuery('select#venue option:selected')
    .parentsUntil( jQuery('optgroup'), '[label*="international"]')
        .attr('label');`

编辑

有人向我指出，以下 optgroup 嵌套也是可能的

<select id="venue">
    <optgroup label="New England"></optgroup>
        <option value="1">&nbsp;NH</option>
        <option value="2">&nbsp;ME</option>
        <option value="3">&nbsp;VT</option>
        <option value="4">&nbsp;MA</option>   
        <option value="4">&nbsp;CT</option>   
        <option value="4">&nbsp;RI</option>   
    <optgroup label="International"></optgroup>
        <option value="100">&nbsp;Canada</option>
        <option value="100">&nbsp;Texas</option>
        <option value="100">&nbsp;Mexico</option>
    <optgroup label="&nbsp;Europe"></optgroup>
        <option value="100">&nbsp;&nbsp;Bruges</option>
</select>

【问题讨论】：

.prevUntil 是您需要的，而不是 .parentsUntil，因为 optgroup 不是父级。
好声音，但dropdownval 仍然返回undefined
我没有意识到prevUntil 停止之前匹配的元素，不包括它。看我的回答。
如果你想像编辑一样嵌套，你真的需要将 optgroups 包裹在它们包含的内容周围。你怎么能说欧洲是一个子类别而不是一个主要类别？
这是一个非常好的观点，也是下拉标记生成方式的一个缺点。我想我可以开始计算出现开玩笑的&nbsp;的数量

标签： jquery select optgroup

【解决方案1】：

如果您的列表是可靠排序的（如所示），那么您可以跳过捕获关系，即first() 等，并一直关注.prevAll('optgroup')。但是如果你的options 的顺序可能会改变，试试.nextAll('optgroup')，或者按照@Barmar 的逻辑往需要的方向遍历：

$("#venue").change(function() {
    $("#venue option:selected").each(function() {
        if ($(this).prevAll('optgroup').attr('label') == 'International') {
            alert('detected');
        }
    });
});

http://jsbin.com/ibIJezO/1/

【讨论】：

是的，jsfiddle挂了，我去jsbin了
您的答案适用于我的测试用例，但是我发现实际上可能进一步嵌套到子类别中。我会认为您的答案是正确的，因为它解决了我的 OP，但如果您对这些不同的条件有任何想法，我将不胜感激。
.prevAll() 和 .nextAll() 可以上下移动，然后您需要使用 .children() 之类的东西来深入了解这些选定的级别。您可以在此处了解使用 jQuery 的“树遍历”：api.jquery.com/category/traversing/tree-traversal - 这些概念与上述答案一起应用应该为您指明正确的方向。

【解决方案2】：

if ($('#venue option:selected').prevAll('optgroup').first().is('[label*="International"]'))
    ...
}

.prevAll('optgroup') 获取前面的所有optgroups。 .first 将其限制为第一个，即最接近前面的optgroup。然后.is() 会告诉您其标签是否符合您的条件。

JSBIN

【讨论】：

感谢您的帮助，我不知道 .is() 将查询修改为 bollian - 这将非常有用 - 再次感谢。