Semantic UI: Multi Select Dropdown pre-select values

Question

I'm working on building a web page using Semantic UI Framework. I'm new to both UI frameworks and jquery. I'm using a multi select Dropdown component to select roles for an user. I'm able to implement the dropdown and select values.

But can anyone help me set a default value(pre-selected) to the dropdown ? I've tried the behaviors specified here , but somehow can't get it to work. Is there something I'm missing here ?

Here is the fiddle and the 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 fetching the values to a variable in javascript?

Answer 1

Your syntax is slightly off. Try this:

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