Javascript 语义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>

选择。。
选择。。

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

$（“#程序类型”）。下拉列表({
onChange：函数（val）{
如果（val==“val1”）
{
$（'#servicetype.menu'）.html(
“沙龙”+
“卡车”
);
};
如果（val==“val2”）
{
$（'#servicetype.menu'）.html(
“亚伯拉罕”+
“豹”+
);
};
如果（val==“val3”）
{
$（'#servicetype.menu'）.html(
“喷气式飞机”+
“轰炸机”+
);
};
}
});

找到了它

我把

$（'#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();
                    };
});

$（“#程序类型”）。下拉列表({
onChange：函数（val）{
如果（val=“生育率”）
{
$（#servicetype'）。下拉列表（{'set value'：'something'}）；
$（'#servicetype.menu'）.html(
‘机场核心计划’+
“艺术”
);
$（'#servicetype'）。下拉列表（）；
};
});
一种变通方法：

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

功能设置选项（选择器、选项）{
var att=“数据dinamic opt”；
$（选择器）.find（'['+att+']'）.remove（）；
var html=$（选择器+'.menu'）.html（）；
用于（输入选项）{
html+=''+键+''；
}
$（选择器+'.menu'）.html（html）；
$（选择器）.dropdown（）；
}
$（“#程序类型”）。下拉列表({
onChange：函数（val）{
如果（val==“val1”）
SETDINAMIC选项（“#服务类型“，{Saloon:'val1'，Truck:'val2'）；
如果（val==“val2”）
setdinamicpoptions（“#servicetype”，{Abraham:'val1'，Leopard:'val2'}）；
如果（val==“val3”）
SETDINAMIC选项（“#服务类型“，{Jet:'val1'，Bomber:'val2'）；
}
});

试试这个。
如果您想让悬停效果打开下拉菜单，那么您不需要使用javascript，而是可以向父div添加简单类

这是一个演示


成员
球员
工作人员
另一种及时设置下拉列表内容的方法（例如基于某些动态标准）是使用remoteApi，这对于Semantici下拉列表的数据绑定功能来说是一个特别不幸的名称

按照此处的说明操作：
不幸的是，这会覆盖以前的组件状态，这意味着您将丢失所有存储的“默认值”。我提交了一份错误报告：还请注意，这会导致再次添加所有内部事件处理程序-因此将触发两次“更改”事件。对我来说，这是不可取的。注意：如上所述，从v.1.0开始，正确的方法是
$（'.ui.dropdown'）。dropdown（'refresh'）；
<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>