标签: jquery-select2

例如,当使用select2 muti-value时,用户输入' new ',并显示

• 新墨西哥
• 新罕布什尔
• 新泽西州
• 纽约

在选择" New Mexcio "之后,用户想要从剩下的3个中再次选择.为了做到这一点,用户必须再次输入"新".

有没有办法保留结果而不是清除' 查询？

谢谢

从玩我可以看到这段代码

$("#Selected3").select2({ minimumInputLength: 3 });
$("#Selected3").select2({ placeholder: "Show a placeholder" });

将显示占位符但删除 minimumInputLength 参数值。

有谁知道可以修改此示例的方法，以便在不丢失最小..长度值的情况下添加占位符。

任何答案都需要考虑将语句放在单独的文件中的可能性，即一个在页面上，另一个在引用的 .js 文件中。

我知道如果我一次设置所有参数，这会容易得多，例如

$("#Selected3").select2({
        minimumInputLength: 3,
        placeholder: "Show a placeholder"
    });

但我正在一个目前不允许这样做的框架内工作。

编辑：对于任何愿意尝试但不知道 select2 的人，该库来自GitHub 上的 Select2

我有三个 Select2 框。当我更改一个时，所有未点击的都需要重置。当我这样做时，它会导致无限循环，并且我得到标题中列出的错误。我该如何解决这个问题？

var group = $(".searchgroup1");

group.on('change', function(){
    var box = group.index($(this));
    group.each(function(index){
        if(box != index){
            $(this).val(null).trigger("change"); // <-- this resets the <select>
            //If I remove the code up here, the infinite loop disappears
        }
    });
});

我想创建一个包含几个城市的区域。所以我决定使用 jQuery Select2

这是我的创建表单多项选择

<div class="form-group {{ $errors->has('cities') ? 'has-error' : '' }}">
                    <label>Tentukan Kota</label>
                    <select name="cities[]" class="city form-control" data-placeholder="Pilih Kota" style="width: 100%;" multiple="multiple">
                    @foreach($cities as $city)
                    <option value="{{ $city->id }}">{{ $city->name }}</option>
                    @endforeach
                    </select>

                </div>

我可以像在文档中一样进行多项选择。

这是我的控制器，它处理显示创建表单

public function zone_create()
{
    $cities = City::where('zone_id', null)->get();
    return view('backend.admin.pricings.zone_create', compact('cities'));
}

这种关系是一个区域有多个城市。

class Zone extends Model
{
    protected $fillable = [
        'name',    
    ];

    public function cities(){
        return $this->hasMany(City::class);    
    }
}

城市所属区域

class City extends Model
{
    protected $fillable = [
        'zone_id', …

我有一个 Django 项目，其中有一个像这样的选择下拉列表：

但我想要这样的东西：

我的<select>表单看起来像这样：（在开发人员工具中检查后）

<select class="form-control" data-parsley-required="true" id="id_org_role" name="org_role" required="">
    <option value="A">Administrator</option>
    <option value="M" selected="selected">Member</option>
</select>

如果不是 select2，是否还有其他 jquery 库可以帮助我完成此操作？

我曾尝试选择二的文档以下，并认为，如果 这种方式（对于模板），我们可以跨越该选项的文本旁边的图像，那么，必须有跨越“文字说明”太下，每个选项的方式。但我不知道这是如何实现的。直到现在我一直试图做的是：

var org_role = function(roles){
      if (!roles.id) {
      return roles.text;
    }
    return $(
    '<strong>' + roles.text + '</strong>' + '<br/>'
    '<span>' + "some description" + '</span>'
  );
};

$("#id_org_role").select2({
  templateResult: org_role,
});

但这是行不通的。此外，即使是这样，它也会为所有选项显示相同的描述。但它必须明显不同。

我在模板中的 Django 表单如下所示：

<form method="POST" action="" class="org-member-edit" id='organization_permissions' data-parsley-validate>

{% csrf_token %}

<div class="form-group member-role{% if org_role_form.org_role.errors %} has-error{% endif %}">

    <label …

我有一个 Select2 插件的多重选择，我想修复某些选项，而其他选项则不是，例如，阿拉斯加和加利福尼亚 NO选项可以删除，但是如果该人选择其他选项，例如Hawaii，则可以正常删除它们。

我想知道如何删除某些标签的X以防止它们被取消选择。

我希望能够使用箭头键进入我想要的 select2 选项，然后按 Tab 键选择该选项，然后像往常一样 Tab 键到下一个元素。

我已经使用向下箭头打开 select2 ，如下所示：

$(document).on('keydown', '.select2', function(e) {
  if (e.originalEvent && e.which == 40) {
    e.preventDefault();
    $(this).siblings('select').select2('open');
  } 
});

我还可以使用箭头到达我需要去的地方。现在我正在努力使标签部分工作。

我假设因为在select2-search__field我按下键时有焦点，那就是我将事件绑定到的元素？然后大概我需要获取当前突出显示的选项的值并触发 select2 更改？

我不是 100% 确定这是正确的方法，但我无法弄清楚。

我正在使用 JS Select2 库作为多个选项选择。选择位于内div其通过它的父滚动div与css- overflow-y: scroll。嵌套div滚动良好，直到打开一个选项。打开选项时，除非在“选择选项”上div滚动，否则变得无法滚动。不确定问题的根源是我的 html/css 还是它的select2lib。

在此先感谢您的帮助！

我的标记：

<div id="topcontainer" style="padding-top: 100px; overflow-y: scroll;  position: absolute; height: 1000px; width: 500px; background: #6d3353">
<div id="parent" style="position: relative; height: 3000px; width: 200px; background: #e4b9b9">
    <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
        <option value="AL">aaaaaaa</option>
        <option value="AL">bbbbbbb</option>
        <option value="AL">ccccccc</option>
        <option value="WY">ddddddd</option>
    </select>
    <script>

        $(document).ready(function () {
            $('.js-example-basic-multiple').select2();
        });
    </script>
</div>

我正在使用 Node.js 来捆绑我的文件，并require()在我的主 JS 中使用 Select2 作为 a 。

我还有以下代码：

    <select class="form-control " 
            data-container-css-class="form-control-dropdown" 
            name="quick_pop_quiz[title]" 
            id="quick_pop_quiz-title" 
            data-form-dropdown-handler>

    <optgroup label="">
        <option value="1">
            Herr </option>
        <option value="2">
            Frau </option>
    </optgroup>

    <optgroup label="----------------">
        <option value="3">
            Herr Dr. </option>
        <option value="4">
            Herr Prof. </option>
        <option value="5">
            Herr Prof. Dr. </option>
    </optgroup>

    <optgroup label="---------------">
        <option value="6">
            Frau Dr. </option>
        <option value="7">
            Frau Prof. </option>
        <option value="8">
            Frau Prof. Dr. </option>
    </optgroup>
</select>  

和 javascript：

var $ = require('jquery);
require('select2')($);
var items = $('.selectorforselect2').filter(':not([class^="select2"])'); …

我使用 select2 和引导程序。每次单击 select2 时，我的页面都会展开并出现一个水平滚动条。如何解决这个问题呢：

这是我的 HTML 代码

<div class="row">
  <div class="col-md-12">
     <select id="js-data-example-ajax" class="js-data-example-ajax form-control" name="parentId"></select>
  </div>
</div>

这是我的 JS 代码

<div class="row">
  <div class="col-md-12">
     <select id="js-data-example-ajax" class="js-data-example-ajax form-control" name="parentId"></select>
  </div>
</div>