Question

我尝试在语义ui中实现2个下拉列表时遇到了问题。

我想要发生的是，当我在第一个下拉列表中更改所选项目时，第二个下拉列表将自动从其上一个选项中清除（这是实现对第二个下拉列表内容的自动更改的第一步）。

我创建了一个更简单的版本，其中包含2个下拉列表和JS bin中的清除按钮：here。

代码：

var $one = $('#one'),
    $two = $('#two');

$two.dropdown();
$one.dropdown({
    onChange :function(val) {
        $two.dropdown('clear');
    }
});

$('.button').on('click', function() {
    $('#two').dropdown('clear');  
});

我在这里遇到了多个问题：

我遇到的第一个问题是，清除按钮不会清除两个下拉列表，除非两个下拉列表都只是初始化，并且初始化中没有添加其他设置（即$（＆＃34; .ui.dropdown＆＃34; ）.dropdown（））。

第二个问题是，在提供的代码中，只有当清除按钮的选择器为$（＆＃34）时，才会清除下拉列表（只有第二个下拉列表会因某种原因而不是第一个被清除） ; .ui.dropdown），如果我使用$（＆＃34;＃one＆＃34;）/ $（＆＃34;＃two＆＃34;）按钮不会清除下拉列表。

第三个问题是，当第一个下拉列表发生更改时，第二个下拉列表未被清除，这是我的最终目标。

任何想法或建议都将不胜感激。

Answer 1

$(document).ready(function () {
            $("#super_type").dropdown({
                onChange: function (val) {
                    $('#subtype_list').dropdown('clear');
     });
});

Answer 2

这是semantic UI提供的最好，最简单的解决方案。 $('.ui.dropdown').dropdown({ "clearable": true }); 默认情况下，clearable设置的值为false。

Answer 3

请参阅http://semantic-ui.com/modules/dropdown.html#behavior

$('.your.element').dropdown('set selected', "value");

这对我有用。

Answer 4

仅使用js / jquery

var elemento = $("idElementoSelect).next().next();
elemento.html('text';)

Answer 5

请参阅http://www.semantic-ui.cn/modules/dropdown.html#/settings

$('select.dropdown').dropdown({placeholder:''});

下拉清除选项语义 - ui

5 个答案: