语义 - UI动态下拉列表

Ner*_*dar 6 html javascript jquery drop-down-menu semantic-ui

语义下拉有问题.
我一直在使用Semantic-Ui,并希望动态更改下拉项.也就是说,当我从第一个下拉列表中选择值时,第二个下拉列表的项目将会更改.但问题是,当项目发生变化时,无法选择第二个下拉列表,该值不会改变.下拉列表不会倒退.

HTML
The First Dropdown

<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>
Run Code Online (Sandbox Code Playgroud)

第二次下拉

<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>
Run Code Online (Sandbox Code Playgroud)

..........................
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>' +
                        );
                };
            }
        });
Run Code Online (Sandbox Code Playgroud)

Ner*_*dar 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();
                    };
});
Run Code Online (Sandbox Code Playgroud)

  • 不幸的是,这会覆盖先前的组件状态,这意味着您将丢失任何存储的"默认值".我提交了一份错误报告:https://github.com/Semantic-Org/Semantic-UI/issues/953 (3认同)
  • 注意:正如上面的问题所述,从v.1.0开始,正确的方法是`$('.ui.dropdown').dropdown('refresh');` (2认同)