Interfaccia utente semantica: selezione multipla dei valori di selezione a discesa

Question

Sto lavorando alla creazione di una pagina Web utilizzando Semantic UI Framework. Sono nuovo sia per i framework UI che per jquery. Sto usando un componente Dropdown multi selezione per selezionare i ruoli per un utente. Sono in grado di implementare il menu a discesa e selezionare i valori.

Ma qualcuno può aiutarmi a impostare un valore predefinito (pre-selezionato) nel menu a discesa? Ho provato i comportamenti specificati here, ma in qualche modo non riesco a farlo funzionare. C'è qualcosa che mi manca qui?

Questo è il fiddle e il codice.

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

mio JavaScript:

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

Inoltre, posso ottenere aiuto nel recupero dei valori ad una variabile in javascript?

Answer 1

La sintassi è leggermente disattivata. Prova questo:

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

Answer 2

Aggiungere valori (<option selected="selected">) discesa semantica di tutto selezionare:

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