Semantic-UI 动态下拉菜单

Question

Semantic-UI 动态下拉菜单

javascriptjqueryhtmldrop-down-menusemantic-ui

6

有一个语义化UI下拉菜单的问题。
我一直在使用语义化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>

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

- Nerdar

4个回答

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

试一下这个。

- Artur Luiz Oliveira

0

另一种设置下拉内容的方法是使用remoteApi，它是SemanticUI下拉菜单数据绑定功能的一个非常不幸的名称，可以根据某些动态条件实时设置（例如）。

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

- Peter Aron Zentai

0

如果您想要悬停效果来打开下拉菜单，那么您不需要使用JavaScript，而是可以将类simple添加到父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>

- user3013507

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nerdar · Accepted Answer

找到了，

我在赋值后加入了 $('#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();
                    };
});