Semantic user interface: Multi Select Highlight preselected values

Question

I am working on creating a webpage using the Semantic UI Framework. I am new to UI and jquery interfaces. I use the multi-page Dropdown component to select roles for the user. I can implement a drop down list and select values.

But can anyone help me set the default value (preselected) in the drop down list? I tried the behavior indicated here , but for some reason cannot make it work. Is something missing here?

Here is the fiddle and code.

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

My JavaScript :

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

Also, can I get help in retrieving variable values ​​in javascript?

Answer 1

Your syntax is slightly off. Try the following:

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

Answer 2

Add values ​​( <option selected="selected"> ) the semantics of the drop-down list for all 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'); } } }); });