Semantic UI: Multi Select раскрывающийся список предварительно выбрать значения

Я работаю над созданием веб-страницы с помощью семантической структуры пользовательского интерфейса. Я новичок как в UI-фреймворках, так и в jquery. Я использую раскрывающийся компонент multi select для выбора ролей для пользователя. Я могу реализовать раскрывающийся список и выбрать значения.

но может ли кто-нибудь помочь мне установить значение по умолчанию(предварительно выбранное) в раскрывающемся списке ? Я пробовал поведение, указанное здесь , но почему-то не могу заставить его работать. Я что-то упускаю ?

здесь скрипка и код.

мой HTML-код:

<div class="twelve wide field">
    <label style="width: 250px">Add roles to user</label>
    <select name="skills" multiple="" class="ui fluid dropdown">
        <option value="">Roles</option>
        <option value="Role1">Role 1</option>
        <option value="Role2">Role 2</option>
        <option value="Role3">Role 3</option>
    </select>
</div>

мой JavaScript:

$(".ui.fluid.dropdown").dropdown({ allowLabels:true})
$('.ui.fluid.dropdown').dropdown({'set selected': 'Role1,Role2'});

кроме того, могу ли я получить помощь в получении значений переменной в javascript?

7
css jquery multi-select semantic-ui

2 ответов

ваш синтаксис немного выключен. Попробуйте это:

$('.ui.fluid.dropdown').dropdown('set selected',['Role1','Role2']);
18

добавить значения ( <option selected="selected">) выпадающий семантический обо всех select:

$("select").each(function(){
            var $that = $(this);
            var values = $that.val();
            $("option", $that).each(function(){
                $(this).removeAttr("selected");
            });
            $that.dropdown('set selected', values);
            $("option", $that).each(function(){
                var curr_value = $(this).val();
                for(var i = 0; i < values; i++){
                    if(values[i] == curr_value){
                        $(this).attr('selected','selected');
                    }
                }
            });
        });
0