[英]Semantic UI Dropdown Option Data Attribute
我一直在尝试在语义 UI 下拉option
附加data-*
属性,但没有成功(数据属性没有被复制到生成的下拉选项中) 。
这是我的select
的结构:
<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>
$("#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.
}
});
我一直在阅读,但我所看到的关于数据属性支持的所有内容都是将设置存储在那里。 不是我真正需要的。
希望有人做过类似的事情,让我知道解决方案是什么。
它不漂亮,但您可以使用onChange中的详细信息来搜索数据属性。 你所追求的功能在这里被特别拒绝了 - https://github.com/Semantic-Org/Semantic-UI/issues/931
onChange: function(value, text, choice) {
$(this).children('option[value=' + $(choice).data('value') + ']').data('wsg')
}
通过将数据属性附加到主下拉对象,然后再去两个级别来获得我想要的选择,我能够非常一致地工作,就像这样
'[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)'
我可以用于这种情况的最好方法是将选项值保存为可以对象。 这解决了我的问题
JS
$(option).val(`{ id: '${item._id}', validTimestamp: ${validTimestamp} }`);
HTML
<div class="item" data-value="{ id: '61ccf18e9d865424e7e0dd89', validTimestamp: 7776000000 }">3 months</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.