javascript 语义 UI 动态下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22164660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Semantic-UI Dynamic Dropdown
提问by Nerdar
Got a problem with semantic-ui dropdown.
I've been using Semantic-Ui, and wanted to change the dropdown item dynamically.
That is, when i choose the value from the first dropdown, the second dropdown's item will change.
But the thing is, when the items are changed, the second dropdown cannot be chose,
the value won't change. The dropdown won't collapse back.
语义 UI 下拉菜单有问题。
我一直在使用 Semantic-Ui，并想动态更改下拉项。也就是说，当我从第一个下拉列表中选择值时，第二个下拉列表的项目将会改变。但问题是，当项目改变时，不能选择第二个下拉菜单，值不会改变。下拉菜单不会折叠回来。
The HTML
The First Dropdown
HTML
第一个下拉菜单
<div id="programmetype" class="ui fluid selection dropdown">
<input type="hidden" name="programmetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="val1">Car</div>
<div class="item" data-value="val2">Tank</div>
<div class="item" data-value="val3">Plane</div>
</div>
</div>
Second Dropdown
第二个下拉菜单
<div id="servicetype" class="ui fluid selection dropdown">
<input type="hidden" name="servicetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="select">Choose..</div>
</div>
</div>
..........................
The jQuery
..........................
jQuery
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Saloon</div>' +
'<div class="item" data-value="val2">Truck</div>'
);
};
if (val == "val2")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Abraham</div>' +
'<div class="item" data-value="val2">Leopard</div>' +
);
};
if (val == "val3")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Jet</div>' +
'<div class="item" data-value="val2">Bomber</div>' +
);
};
}
});
采纳答案by Nerdar
Found it,
找到了，
I put $('#servicetype').dropdown();after assigning the values:
我$('#servicetype').dropdown();在分配值后放置：
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "fertility")
{
$('#servicetype').dropdown({'set value':'something'});
$('#servicetype .menu').html(
'<div class="item" data-value="acp">ACP</div>' +
'<div class="item" data-value="art">ART</div>'
);
$('#servicetype').dropdown();
};
});
回答by Artur Luiz Oliveira
A workaround approach:
一种解决方法：
function setDinamicOptions(selector, options) {
var att = "data-dinamic-opt";
$(selector).find('[' + att + ']').remove();
var html = $(selector + ' .menu').html();
for(key in options) {
html += '<div class="item" data-value="' + options[key] + '" ' + att + '>' + key + '</div>';
}
$(selector + ' .menu').html(html);
$(selector).dropdown();
}
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
setDinamicOptions('#servicetype', {Saloon:'val1', Truck:'val2'});
if (val == "val2")
setDinamicOptions('#servicetype', {Abraham:'val1', Leopard:'val2'});
if (val == "val3")
setDinamicOptions('#servicetype', {Jet:'val1', Bomber:'val2'});
}
});
Try this.
试试这个。
回答by user3013507
If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div
如果您希望悬停效果打开下拉菜单，那么您不需要使用 javascript，而是可以将 class simple 添加到您的父 div
this is a demo http://jsfiddle.net/BJyQ7/30/
这是一个演示 http://jsfiddle.net/BJyQ7/30/
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
回答by Peter Aron Zentai
Another approach for setting dropdown content just in time (for example based on some dynamic criteria) is using the remoteApi, that is a particularly unfortunate name for the data binding features of the SemanticUI dropdowns.
另一种及时设置下拉内容的方法（例如基于某些动态标准）是使用 remoteApi，这是一个特别不幸的名称，用于 SemanticUI 下拉列表的数据绑定功能。
Follow instructions here: http://semantic-ui.com/behaviors/api.html#mocking-responses
按照此处的说明进行操作：http: //semantic-ui.com/behaviors/api.html#mocking-responses
