下拉清除選項語義-ui

Question

我在語義 ui 中嘗試實現 2 個下拉菜單時遇到了問題。

我想要發生的是，當我更改第一個下拉列表中的所選項目時，第二個下拉列表將自動從其先前的選擇中清除（這是對第二個下拉列表的內容實現自動更改的第一步）。

我在 JS bin 中創建了一個更簡單的版本，其中包含 2 個下拉菜單和一個清除按鈕： here 。

編碼：

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

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

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

在這里我遇到了多個問題：

我遇到的第一個問題是清除按鈕不會清除兩個下拉列表，除非兩個下拉列表都只被初始化並且沒有在初始化中添加其他設置（即 $(".ui.dropdown").dropdown()）。

第二個問題是，在提供的代碼中，只有當清除按鈕的選擇器為 $(".ui.dropdown) ，如果我使用 $("#one")/$("#two") 按鈕將不會清除下拉列表。

第三個問題是，當第一個下拉列表發生變化時，第二個下拉列表沒有被清除，這是我的最終目標。

任何想法或建議將不勝感激。

Answer 1

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

Answer 2

這是語義 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:''});