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?

Kight

Answer 1

Your syntax is slightly off. Try this:

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

Sender

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. – Mendelian

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

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

Answer 2

Add values ( <option selected="selected"> ) dropdown semantic about 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');
                    }
                }
            });
        });

Schoolmate

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

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

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, – Taitaichung

Answer 3

Well, I believe that have an option better to select all.

$('.selectAll').click(function(){
        $dropdown.find('option').each(function(){
            var $option = $(this);
            if ($option.val() === "") {
                return;
            }
            $dropdown.dropdown('set selected', [$option.val()]);
        });
    });

Guayule