Семантический пользовательский интерфейс: множественный выбор значений предварительного выбора в раскрывающемся списке

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

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

Вот скрипта и код.

Мой 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?


jquery css multi-select semantic-ui
person Phanikanth    schedule 25.08.2015    source источник

Ответы (3)


arrow_upward
28
arrow_downward

Ваш синтаксис немного не так. Попробуй это:

$('.ui.fluid.dropdown').dropdown('set selected',['Role1','Role2']);
person Adnan Y    schedule 25.08.2015
comment
Важная деталь (с которой я потрудился, чтобы раскрыть) заключалась в том, чтобы не инициализировать select с .dropdown() раньше, поскольку после этого установка выбранных значений не работает. - person Saran; 24.12.2015
comment
Спасибо! Небольшой фрагмент для рулей: $('.ui.dropdown').dropdown('set selected',[{{#each tags}}'{{this}}', {{/each}}]); - person Flaudre; 27.03.2016
comment
как я могу сделать это с помощью semantic-ui.com/modules/dropdown.html# поиск-выбор - person Boris Barroso; 08.06.2016

arrow_upward
0
arrow_downward

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

$("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');
                    }
                }
            });
        });
person Jordan Azoulay    schedule 28.02.2018
comment
Считаете ли вы, что ваше решение добавляет новое качество существующему ответу? Это намного дольше и намного сложнее. - person L. Guthardt; 28.02.2018
comment
это единственное решение, которое я нашел, когда у меня выбрано несколько вариантов - person Jordan Azoulay; 02.03.2018
comment
Хорошо, если вы считаете, что ваше решение требуется, это нормально. Но тогда вы должны объяснить свой код, чтобы получить полный и качественный ответ, - person L. Guthardt; 05.03.2018

arrow_upward
0
arrow_downward

Ну, я считаю, что есть вариант, лучше выбрать все.

$('.selectAll').click(function(){
        $dropdown.find('option').each(function(){
            var $option = $(this);
            if ($option.val() === "") {
                return;
            }
            $dropdown.dropdown('set selected', [$option.val()]);
        });
    });
person Bernardo Castro    schedule 15.01.2020