web-dev-qa-db-ja.com

セマンティックUI：複数選択ドロップダウンの事前選択値

Semantic UIFrameworkを使用してWebページの構築に取り組んでいます。私はUIフレームワークとjqueryの両方に不慣れです。複数選択のドロップダウンコンポーネントを使用して、ユーザーの役割を選択しています。ドロップダウンを実装して値を選択することができます。

しかし、誰かがデフォルト値（事前に選択された）をドロップダウンに設定するのを手伝ってもらえますか？指定された動作を試しました ここ 、しかしどういうわけかそれを動作させることができません。ここで欠けているものはありますか？

fiddle とコードは次のとおりです。

私の[〜＃〜] 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>

私のJavaScript：

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

また、JavaScriptの変数に値をフェッチするのに助けを得ることができますか？

jquerycssmulti-selectsemantic-ui
8
Phanikanth

構文が少しずれています。これを試して：

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

値を追加します（<option selected="selected">）すべての選択に関するドロップダウンセマンティクス：

$("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

ええと、私はそれがすべてを選択するより良いオプションがあると信じています。

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