标签: jquery-select2

我使用“Select2”作为下拉列表。
\n现在我\xc2\xb4d喜欢我的页面内容根据我在Select2中的选择而改变。

我\xc2\xb4m向前迈进，得到了这样的结果：

JS

$(document).ready(function(){\n// display logs\nfunction log(text) {\n  $(\'#logs\').append(text + \'<br>\');\n}\n//SELECT2\n$( ".select2_choose_objnr" ).select2({\n    placeholder: "V\xc3\xa4lj Objekt..",\n    ajax: {\n        url: "php.php",\n        type: "POST",\n        dataType: \'json\',\n        delay: 250,\n        data: function (params) {\n            return {\n                q: params.term // search term\n            };\n        },\n        processResults: function (data) {\n            return {\n                results: data\n            };\n        },\n        cache: true\n    },\n  }).on("change", function(e) {\n      log("change val=" + e.val);\n    });\n});\n

从这个 Js 中，我得到： val=undefined
\n我如何更改我的代码以获取选定的值/文本？

我一直在查看文档，试图找到一种方法来轻松激活 上的选择菜单hover，而不仅仅是click.

不幸的是，我似乎找不到方法（如果存在），并希望有人能指出我正确的方向？

这是一个 plnk，

http://plnkr.co/edit/GTeyWfOp9aTd1B0Be0Hs?p=preview

谢谢大家

我使用 select2 作为输入选择并设置 multiple 为 true。就我而言，我尝试使用 javascript 函数从多个选定值中获取文本数组。

这是我的 javascript 和 html 输入：

<script type="text/javascript">
   function getRoles(val) {
         $('#role-cm_role_text').val('');
         var data = $('#role-cm_role').select2('data')[0].text;
         $('#role-cm_role_text').val(data);
         $('#role-cm_role').on('select2:unselecting', function (e) {
            $('#role-cm_role_text').val('');
        });
    }
</script>

<select id="role-cm_role" class="form-control" name="Role[CM_ROLE][]" multiple size="4" onchange="getRoles(this.value)" style="display:none">
<option value="INQUIRY">CM Inquiry</option>
<option value="SUPERVISOR">CM Supervisor</option>

<input type="hidden" id="role-cm_role_text" class="form-control" name="Role[CM_ROLE_TEXT]">

因此，如果我尝试选择一个值，则结果与CM_ROLE_TEXT相同CM_ROLE。但是，如果我尝试选择多个值，则结果CM_ROLE_TEXT只是获得第一个值CM_ROLE。

如果尝试选择多个值的结果：

[CM_ROLE] => Array
        (
            [0] => INQUIRY
            [1] => SUPERVISOR
        )

[CM_ROLE_TEXT] => CM Inquiry // I need the …

我用于select2选择候选人技能。我不想更改选择框宽度，我想要 slelet2 的固定宽度

到目前为止我尝试过什么？

//HTML
<select class="skill_select_id" name="skill_select_id">
    <?php foreach ( $skills as $skill ) { ?>
        <option value="<?= $skill['id'] ?>" ><?= $skill['name'] ?></option>
    <?php } ?>
</select> 

首先我使用resolve

//Script 
$('.skill_select_id').select2({tags:true, width: 'resolve'});

我也尝试过element，100%选项width

//Another Try
$('.skill_select_id').select2({tags:true, width: 'element'}); 

但它并没有帮助我设置 select2 的固定宽度。

我不想添加inline CSS来解决这个问题，因为如果我使用该插件，那么它必须有一些针对此类问题的解决方案。

我有一个控件需要有多个选择选项来创建令牌。每当创建或删除令牌时都会生成数据库调用。现在的问题是，当我从服务器加载新页面时，控件中没有令牌。以下是我的剃刀代码：

@Html.DropDownList("ProjectIds", new MultiSelectList(projDDL.Items, "key", "value",Model.SelectedProject), new {@class = "form-control selectorBind", multiple = "multiple",@id= "myid" data_rowid = "ID", data_type="Project",data_myattr= "attr" })

projDDL是一个包含下拉列表项的字典

SelectedProject也是包含所选项目键、值的字典

我尝试使用 MultipleSelect 跟踪此链接 MVC DropDown list但没有成功。

从服务器端加载令牌是我的问题。虽然我知道我可以通过 Jquery 轻松完成此操作，但我想使用 Razor。

解决方案 检查@Html.DropDownListFor对比@Html.ListBoxFor

@Html.ListBoxFor(y => y.SelectedProjects, new MultiSelectList(projDDL.Items, "key", "value", Model.SelectedProjects), new { @class = "form-control selectorBind", multiple = "multiple", @id = @Model.SkillType+"Project_" + Model.ID, data_rowid = @Model.ID, data_type = "Project", data_myattr = "FK_ProjectID" })

我正在使用select2 JQuery 插件。下拉列表中的第一个选项标记为“所有组织”。当用户搜索某个选项时，我不想在搜索结果中包含第一个“所有组织”选项。

有一个简单的方法可以做到这一点吗？

看来策略是使用自定义匹配器，如果我看到该选项则返回 null。但是，然后我需要对匹配器的其余部分进行编码，这基本上会执行与默认行为相同的操作。我可以以某种方式从自定义匹配器中调用原始匹配器吗？

$("select").select2({
    matcher: custMatcher
});

function custMatcher(params, data) {
    if (params.term === "All Organizations") {
        return null;
    }

    // else do regular searching
    // would like to call the original matcher here.
 }

jsfiddle

我有一个 Laravel 编辑表单，它使用 Select2 jQuery 扩展以及从数据库表中提取的选项。

下面是我指的表单选择字段：

            <select id="ship_to" name="ship_to" class="js-example-basic-single2 form-control">
                @foreach($cCustomers as $customer)
                    <option value="{{$customer->id}}"
                    @if ($shipment->ship_to == $customer->id) selected="selected" 
                                 @endif
                    >{{$customer->customer_name}}</option>
                @endforeach
            </select>

现在，一切都弹出来了，选项都在那里，选择框已转换为 Select2 格式。我的问题是，当我从数据库中提取数据时，如果特定列为空，则 select2 会提取第一个选项，而不是允许的空选择（是的，我选择了一个占位符），清除 select2 框效果很好。

所以我的问题是这样的：

如果我有一条记录，其中 select 的字段为 NULL，如何让页面自动打开，将 null 值和占位符放在 select2 框中，而不是第一个选项？

电流输出：

<select id="ship_to" name="ship_to" class="js-example-basic-single2 form-control select2-hidden-accessible" data-select2-id="ship_to" tabindex="-1" aria-hidden="true">
        <option></option>
        <option value="164" data-select2-id="387">4G ENTERPRISES</option>
        <option value="192">4G ENTERPRISES</option>
        <option value="81">5280 PACKAGING</option>

我已经为这个问题争论了一个多星期，但几乎没有任何进展。

我看过

• 如何设置jquery select2的选定值？
• Select2 在嵌入引导模式时不起作用
• 使用 JSON 结果填充下拉列表 - 使用 MVC3、JQuery、Ajax、JSON 级联 DropDown
• 重置 select2 值并显示占位符
• https://github.com/select2/select2/issues/3057
• https://github.com/select2/select2/issues/1436。

最后，查看https://select2.org/troubleshooting/common-problems后

我尝试同时应用dropdownParent: $('#myModal')和

// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

这些修复都不起作用，所以我真的束手无策，准备完全放弃使用模式。基本上，我从服务器获取 JSON 对象中的数据，然后使用该数据填充模式。除第一个组合框之外的所有元素（其中一些是选择/组合框）的填充工作正常。

预先感谢您的帮助，如果答案发布在其他地方，我很抱歉，但我找不到它。以下是相关代码：

<!-- Modal to Add / Edit Delay parent div must have same id as value of the data-target attribute used to trigger the modal -->
<div class="modal fade" id="delayAddModal" tabindex="-1" role="dialog" aria-labelledby="delayAddLabel">
    <div class="modal-dialog" role="document">
        <!-- …

我已经浏览了在 youtube、stakoverflow 和其他网站上能找到的所有解决方案。我正在使用 Select2 添加多个角色，但我始终遇到相同的错误。

<select id="role" name="role_id[]" multiple='multiple' 
        class="form-control js-example-basic-multiple">
    @foreach($roles as $role)
        <option value="{{$role->id}}">{{$role->name}}</option>
    @endforeach
</select>

DD 功能显示完美结果，但之后显示错误。

它工作得很好，直到我添加带有 name="role_id[]" 的 [] 。表单动作如下。

public function store(Request $request)
{
    $this->validate($request, [
        'name'=> 'required|string|max:225',
        'status'=> 'required',
        'role_id'=> 'required',
        'email'=> 'required|string|email|max:225|unique:users',
        'password'=> 'required|string|min:6|confirmed'
    ]);

    $password = Hash::make($request->password);
    // dd($request->all());

    $user = new User;
    $user->name = $request->name;
    $user->status = $request->status;
    $user->role_id = $request->role_id;
    $user->email = $request->email;
    $user->password = $password;
    $user->remember_token;
    $user->save();
    // $user->roles()->sync($request->roles, false);
    return back()->with('message', 'User added successfully!!');
}

我正在使用select2作为自定义选择框。但我无法更改箭头图标。innerHTML不起作用。我能做些什么来对抗它？

$(".position-select").select2({
  dropdownParent: $(".choose-position")
});

// $('b[role="presentation"]').remove();

// this not working!
$('.choose-position select2-arrow').append(
  '<svg style="fill:red" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg>'
);

* {
  font-family: "Segoe UI", Roboto, sans-serif;
}

.choose-position .select2-container {
  width: 100% !important;
}

.choose-position .select2-container--default .select2-selection--single {
  width: 100% !important;
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  font-size: 16px;
  background-color: #fafafa;
  border: 1px solid #eeeeee;
  border-radius: 25px;
  transition: 0.1s;
}

.choose-position …