Динамический раскрывающийся список Semantic-UI

возникла проблема с раскрывающимся списком semantic-ui.
Я использовал Semantic-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>' +
                        );
                };
            }
        });
6
drop-down-menu html javascript jquery semantic-ui

4 ответов

нашли его, zzzz

Я поставил $('#servicetype').раскрывающийся(); после присвоения значений.

$("#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();
                    };
});
6

обходной путь:

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

попробуйте это.

3

другой подход для установки выпадающего содержимого как раз вовремя (например, на основе некоторых динамических критериев) использует remoteApi, что является особенно неудачным именем для функций привязки данных раскрывающихся списков SemanticUI.

следуйте инструкциям здесь: http://semantic-ui.com/behaviors/api.html#mocking-responses

0

Если вы хотите, чтобы hover effect открыл раскрывающееся меню, вам не нужно использовать javascript, вместо этого вы можете добавить класс simple в свой родительский div

Это демо http://jsfiddle.net/BJyQ7/30/

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