语义 UI 下拉选项数据属性答案

【问题标题】：Semantic UI Dropdown Option Data Attribute语义 UI 下拉选项数据属性
【发布时间】：2016-05-03 16:35:36
【问题描述】：

我一直在尝试在语义 UI 下拉列表 option 中附加 data-* 属性，但没有成功（数据属性不会被复制到生成的下拉选项中）。

这是我的select的结构：

HTML

<select id='my-dropdown' name='department'>
    <option value='1' data-wsg='something'>Department 1</option>
    <option value='2' data-wsg='another'>Department 2</option>
    . . .
    <option value='n' data-wsg='custom data'>Department N</option>
</select>

jQuery

$("#my-dropdown").dropdown({
    allowAdditions: false,
    fullTextSearch: true,
    onHide: function() {
        // Some codes.
    },
    onChange: function(value, text, choice) {
        // Access the data-wsg attribute of the selected option.
    }
});

我已经阅读了一些内容，但我所看到的关于数据属性支持的所有内容都是将设置存储在其中。不是我真正需要的。

希望有人做过类似的事情，让我知道解决方案是什么。

【问题讨论】：

标签： javascript jquery semantic-ui custom-data-attribute html-dataset

【解决方案1】：

它并不漂亮，但您可以使用 onChange 中的详细信息来查找数据属性。您所追求的功能在这里被明确拒绝 - https://github.com/Semantic-Org/Semantic-UI/issues/931

onChange: function(value, text, choice) {
    $(this).children('option[value=' + $(choice).data('value') + ']').data('wsg')
}

【讨论】：

【解决方案2】：

通过将数据属性附加到主下拉对象，我能够使其工作非常一致，然后只需再进行两个级别以获得我想要的选择，就像这样

'[data-testid="region-dropdown"] > div.visible.menu.transition > div:nth-child(4)'

语义 UI 使用 visible.menu.transition 类将所有下拉选项包装在一个 div 中，然后每个选项都是它自己的 div，因此只要选项的顺序一致，nth-child 就允许您选择特定选项。

我发现这几乎适用于任何输入类型，只需弄清楚在哪里设置数据属性，然后找到选择器的路径。

例如，可以使用类似的方式选择特定选项卡

'[data-testid="tabs-menu"] > div.ui.attached.tabular.menu > a:nth-child(1)'

【讨论】：