語義 UI 下拉選項數據屬性

Question

我一直在嘗試在語義 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.
    }
});

我一直在閱讀，但我所看到的關於數據屬性支持的所有內容都是將設置存儲在那里。 不是我真正需要的。

希望有人做過類似的事情，讓我知道解決方案是什么。

Answer 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')
}

Answer 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)'

Answer 3

我可以用於這種情況的最好方法是將選項值保存為可以對象。 這解決了我的問題

JS

$(option).val(`{ id: '${item._id}', validTimestamp: ${validTimestamp} }`);

HTML

<div class="item" data-value="{ id: '61ccf18e9d865424e7e0dd89', validTimestamp: 7776000000 }">3 months</div>