标签: select2

我有一些代码可以使用 select2 元素创建一个手风琴，该元素具有一个名为 docType 的类。我还有 jquery 代码来触发选择 jquery 元素值的事件。虽然这适用于页面加载中已经存在的 select2 元素，但它不会触发动态添加的元素。这是我的更改代码：

$('.docType').on('change', function() {
    // the code inside should be firing for dynamically added elements
}

有谁知道为什么这种方式不起作用？

我的页面中有多个 select2。我有一个特定的 ajax 引擎，由于多种原因无法更改它。当最终用户在该字段中键入时，我想填充每个 select2 下拉列表，并使用自制的 javascript 填充 select2 中的“选项”。

我在网上尝试了许多不同的东西，但找不到适用的语法。

例如 ：

      jQuery("customer").select2({
          query: function (options) {
              alert('ok');
              // my ajax call would be here
              xajax_getCustomers(stringFilled);
          }
      });

我试过“ajax：”和其他一些东西，我找不到如何在填充时触发javascript函数。重要提示：我应该能够填充字符串，以便将其传递给我的 ajax 调用

谢谢你的帮助

我已经建立了一个JSFiddle来演示我的问题。

我已经更改了克隆方式，使其更具通用性，因此无需为不同的表重用代码。通常，对于select2元素，我将执行以下操作

$(".campaignType", $tr).select2({
    tags: true
});

这意味着我不需要销毁它。但是，在这种情况下，它似乎不起作用。正如您在小提琴中看到的那样，当添加一行时，第二行上的选择不起作用。它似乎是创建两个跨度。

有什么办法可以使它正常工作吗？

谢谢

我有一个用于multiselet选项的select2输入框,用户可以根据需要选择多个选项,如果所选选项占用的空间比可用宽度多,那么我想自动增加选择框的高度(不想要滚动选项,所有选项都应在可视空间中)并在下一行中获取剩余选项.目前选项将在下一行中出现,但选择框的高度不会增加.

如果我删除.select2-container中的height属性- 默认.select2-selection - 多个类,它就可以了.但是我想要这个height属性来控制选择框的初始高度.

下面是.select2-container中没有高度属性的初始选择框高度- 默认.select2-selection - 多个,自动高度在这里完美运行.

.select2-container--default .select2-selection--multiple {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  cursor: text;
  height: 22px;
}

JSFiddle:https://jsfiddle.net/rd62bhbm/

假设页面上有两个 select2 元素，都使用“onChange”。为了以编程方式在您使用的一个 select2 元素中设置一个值

$('#id1').val('xyz').trigger('change');

如果您在这两个元素中的一个元素中进行选择时希望将另一个元素重置为初始值，则该值设置会触发onChange事件，并且系统进入无限循环。如果您使用，也会发生同样的情况

$('#id1').val('xyz').trigger('change.select2')

我正在使用select v4.0.3.如何获取select元素的替换/上一个值？我已经附加了一个'更改'监听器,但我似乎无法找到以前的值.

如何增加select2建议下拉菜单的高度？

我尝试了https://github.com/select2/select2/issues/144提出的想法：

.select2-results {
  max-height: 500px;
}

但是，这不起作用。如果我改为设置该min-height属性，则尺寸会增加，但是，如果只有1或2个项目，我不希望有500px的巨大下拉列表...因此，min-height这不是一个真正的选择。

我希望下拉菜单动态调整其高度以适应内容，但是在显示滚动条之前将其高度增加到500px。

有没有办法在不触发更改事件的情况下将 select2 加载到默认值？

目前，我正在做：

$('#mylist').val(2).trigger("change");

但这会造成延迟，用户首先会看到一个选项，然后它会改变，这很烦人。

我正在尝试使用select2 jQuery插件来增强selectHTML应用程序中的元素。选择允许选择多个项目。

我想从下拉列表中删除当前选中的项目。我没有在文档中找到明确的解决方案。

我发现的当前解决方案是使用templateResultoption，null如果选择了该项目，则返回模板函数。设置了该原因Results.prototype.template功能，container.style.display = 'none'但是具有的副作用是，即使它们不可见，键盘仍会选择这些项目。

我想用 jQuery 在我的每个选择框周围设置一个红色边框。但它不起作用：

http://jsfiddle.net/jEADR/3795/

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
 <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">

<select class="select" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
    <select class="select" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

<script>
    $(".select").select2();
    $(".select").each(function() {
    $(this).siblings().find(".select2-container").css({"border-color": "red", "border-weight":"5px", "border-style":"solid"});
    });
</script>