6

语义 ui 下拉菜单有问题。
我一直在使用 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>' +
                        );
                };
            }
        });
4

4 回答 4

6

找到了，

我$('#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();
                    };
});
于 2014-03-06T04:29:21.707 回答
3

一种解决方法：

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

尝试这个。

于 2014-07-14T18:16:59.990 回答
0

如果您希望悬停效果打开下拉菜单，那么您不需要使用 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>
于 2014-10-07T23:45:25.030 回答
0

另一种及时设置下拉内容的方法（例如基于某些动态标准）是使用 remoteApi，这是 SemanticUI 下拉菜单的数据绑定功能的一个特别不幸的名称。

按照此处的说明进行操作：http: //semantic-ui.com/behaviors/api.html#mocking-responses

于 2015-10-18T11:40:30.320 回答