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

Question

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

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

Вот fiddle и код.

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

Answer 1

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

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

Answer 2

Добавить значения (<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'); 
        } 
       } 
      }); 
     });