语义下拉有问题。 我一直在使用Semantic-Ui,并希望动态更改下拉项。也就是说,当我从第一个下拉列表中选择值时,第二个下拉列表的项目将会更改。但问题是,当项目发生变化时,无法选择第二个下拉列表,该值不会改变。下拉列表不会倒退。
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>
第二次下拉
<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>
.......................... 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>' +
);
};
}
});
找到了,
我在分配值后放了$('#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();
};
});
解决方法:
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'});
}
});
试试这个。
如果你想悬停效果打开下拉菜单,那么你不需要使用javascript,而是你可以添加类简单到你的父div
这是一个演示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>
另一种及时设置下拉内容的方法(例如基于某些动态标准)是使用remoteApi,这是SemanticUI下拉列表的数据绑定功能的一个特别不幸的名称。
按照这里的说明:http://semantic-ui.com/behaviors/api.html#mocking-responses