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?

Solution

Your syntax is slightly off. Try this:

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

Comments

[Saran]

Important detail (that I toiled with to uncover) was not to initialize the select with .dropdown() earlier as setting selected values doesn't work afterwards.

[flaudre]

Thanks! Little snippet for handlebars: $('.ui.dropdown').dropdown('set selected',[{{#each tags}}'{{this}}', {{/each}}]);

[Boris Barroso]

how can I do that with semantic-ui.com/modules/dropdown.html#search-selection

[L. Guthardt]

Do you think that your solution adds new quality to the existing answer? It's way longer and way more complicated.

[Jordan Azoulay]

it's the only solution I've found when i have multiple options selected

[L. Guthardt]

Ok, if you think that your solution is required that's fine. But then you have to explain your code, in order to produce a complete and quality answer,