jQuery 语义 UI:多选下拉预选值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32194002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:51:34  来源:igfitidea点击:

Semantic UI: Multi Select Dropdown pre-select values

jquerycssmulti-selectsemantic-ui

提问by Phanikanth

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.

我正在使用语义 UI 框架构建网页。我是 UI 框架和 jquery 的新手。我正在使用多选下拉组件为用户选择角色。我能够实现下拉菜单并选择值。

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 fiddleand the code.

这是小提琴和代码。

My HTML:

我的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:

我的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?

另外,我可以帮助我在 javascript 中获取变量的值吗?

回答by Adnan Y

Your syntax is slightly off. Try this:

你的语法有点不对。尝试这个:

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

回答by Jordan Azoulay

Add values ( <option selected="selected">) dropdown semantic about all select :

添加<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');
                    }
                }
            });
        });

回答by Bernardo Castro

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()]);
        });
    });