Question

我一直在尝试在语义用户界面下拉data-*中附加option属性，但没有成功（数据属性未被复制到生成的下拉选项中）

以下是我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.
    }
});

我一直在阅读一下，但我看到的关于数据属性支持的所有内容都是将设置存储在那里。不是我真正需要的。

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

Answer 1

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

$.ajax({
    url : '/UI/clearVendorBillingPO',
    dataType: 'json',
    method : 'POST',
    ...

Answer 2

通过将数据属性附加到主下拉对象，然后再经过两个级别来获得所需的选择，我就能够使它运行得很一致

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

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

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

例如，可以选择特定选项卡，例如

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

语义UI下拉选项数据属性

HTML

的jQuery

2 个答案: