web-dev-qa-db-fra.com

Interface utilisateur sémantique: valeurs de présélection Dropdown multi-sélection

Je travaille sur la création d'une page Web à l'aide du framework Semantic UI. Je suis nouveau dans les frameworks d'interface utilisateur et jquery. J'utilise un composant de liste déroulante multi-sélections pour sélectionner les rôles d'un utilisateur. Je suis en mesure d'implémenter la liste déroulante et de sélectionner des valeurs. 

Mais quelqu'un peut-il m'aider à définir une valeur par défaut (présélectionnée) dans la liste déroulante? J'ai essayé les comportements spécifiés ici , mais je n'arrive pas à le faire fonctionner. Y a-t-il quelque chose qui me manque ici? 

Voici le violon et le code. 

MonHTML:

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

Mon JavaScript :

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

Aussi, puis-je obtenir de l'aide pour récupérer les valeurs d'une variable en javascript?

jquerycssmulti-selectsemantic-ui
7
Phanikanth

Votre syntaxe est légèrement incorrecte. Essaye ça:

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

Ajouter des valeurs (<option selected="selected">) liste sémantique à propos de tout sélectionner: 

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