语义UI动态下拉菜单 [英] Semantic-UI Dynamic Dropdown

问题描述

在语义下拉列表中出现问题。


我一直在使用Semantic-Ui，并想动态地改变下拉项。
也就是说，当我从第一个下拉列表中选择值时，第二个下拉列表的项目将会更改。
但事情是，当项目更改时，第二个下拉菜单不能被选择，
的值不会改变。下拉菜单不会收回。

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.

HTML


第一个下拉菜单

The 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>

第二个下拉菜单

<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

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

推荐答案

找到它，
zzzz

Found it, zzzz

我把$（'＃servicetype'）。dropdown（）;

i put $('#servicetype').dropdown(); after assigning the values.

$("#programmetype").dropdown({
                onChange: function (val) {
                    if (val == "fertility")
                    {
                        $('#servicetype').dropdown({'set value':'shit'});
                        $('#servicetype .menu').html(
                            '<div class="item" data-value="acp">ACP</div>' +
                            '<div class="item" data-value="art">ART</div>'
                            );
                        $('#servicetype').dropdown();
                    };
});

这篇关于语义UI动态下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！