jquery-select2 相关问题

Select2 V.4：搜索框未获得焦点打开

我第一次在我的项目中使用select2，我认为我满足了我的许多项目要求。然而，有一件事不是在他们的搜索框中。 当我单击 select2 元素时，博士...

select2中的processResult不起作用

我使用 select2 加载远程数据我发送 ajax 请求并正确获取响应，但 processResult 不运行，并且不会显示任何内容 JavaScript代码： var 格式产品= 函数（

CSS 设置输入组中select2的边框半径

我想把这个输入组中这个select2的边框半径设置为0 我想把这个输入组中这个select2的边框半径设置为0 <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-user"></i> </span> <input type="hidden" id="default_customer_id" value="1"> <input type="hidden" id="default_customer_name" value="KHÁCH LẺ"> <input type="hidden" id="default_customer_balance" value="0.0000"> <input type="hidden" id="default_customer_address" value=""> <select class="form-control mousetrap select2-hidden-accessible" id="customer_id" required="" name="contact_id" tabindex="-1" aria-hidden="true" aria-required="true"> <option selected="selected" value="">Enter Customer name / phone</option> <option value="1">KHÁCH LẺ</option> </select> <span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" style="width: 281.578px;"> <span class="selection"> <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-customer_id-container"> <span class="select2-selection__rendered" id="select2-customer_id-container" title="KHÁCH LẺ">KHÁCH LẺ</span> <span class="select2-selection__arrow" role="presentation"> <b role="presentation"></b> </span> </span> </span> <span class="dropdown-wrapper" aria-hidden="true"></span> </span> <span class="input-group-btn"> <button type="button" class="btn btn-default bg-white btn-flat add_new_customer" data-name=""> <i class="fa fa-plus-circle text-primary fa-lg"></i> </button> </span> </div> 我尝试了以下代码，但它不起作用： .input-group .select2-container>.select2-container--default .select2-selection--single:not(:first-child):not(:last-child){border-radius:0} 你们能帮我吗？谢谢！ 您的 CSS select 语句有两个主要问题。 第一 .select2-container--default 是 .select2-container 的 sibling，但您将其作为目标，就像它是它的子级一样（即 .select2-container>.select2-container--default） 第二个 虽然只有一个具有 .select2-selection--single 类的元素，并且您使用 .select2-selection--single:not(:first-child):not(:last-child) 来定位它，但选择器将不会匹配该元素。这是因为单个 .select2-selection--single 元素同时是第一个和最后一个子元素。 换句话说， :not(:first-child) 伪类将排除它，因为它是第一个子级，而 :not(:last-child) 伪类将排除它，因为它也是最后一个子级。因此，该元素不满足该选择器的条件，因此不会被定位。 因此，select语句应该是： .input-group .select2-container .select2-selection--single { border-radius: 0; }

如何从dom中删除select2

假设我们有一个简单的 select2 列表： 阿拉巴马州 ... 怀俄明州 开始喜欢...

Select2 + bootstrap 模态问题

引导程序版本：5.1.3 选择2版本：4.1.0 复制链接：https://jsfiddle.net/L60xwgmt/1/ $('.select2').select2({ dropdownParent: $('#dataModal'), ...

我如何仅使用javascript而不使用jquery从select2获取值

我试图通过更改事件获取 select2 的值，但我只找到了使用 jquery 的方法，并且我只想使用 javascript。 selectProduct.addEventListener('更改', () => { 反对...

如何清除select2下拉列表？

我正在处理一个要求，即通过ajax提交表单后必须清除select2下拉框。我搜索并尝试了一些解决方案，但没有成功。 我的 select2 代码是： $(

如何只允许清除 Select 2 多选上特定项目上的项目

假设我预先选择了 item1、item2、item3，我如何允许用户仅删除 item3 并对其他人隐藏 X 删除按钮。 预先感谢

在搜索字段上选择2搜索图标

我将 select2 与 bootstrap3 一起使用。 https://select2.github.io/examples.html 单选框 如何在搜索栏添加搜索图标？ 像这样： https://fk.github.io/select2-bootstrap-css/ 这……

Select2 js自定义CSS

我在更改 Select2 样式时遇到问题。现在我正在使用 Tailwind CSS。但是Select2 css会覆盖它并使其与其他元素不同，如何自定义这个？谢谢...

问题 django-autocomplete-light！新版本镀铬

我有一个带有 python 3.7 和 Django 2.2.10 的 django 应用程序，它使用 django admin，并带有模板的 Materialize css 下标。从最新的 Chrome 更新来看，

如何使用CSS更改一个选择框选项文本（select2）的字体大小？

我想更改我的选择框之一的字体大小。但它不起作用： http://jsfiddle.net/jEADR/3717/ 我想更改我的一个选择框的字体大小。但它不起作用： http://jsfiddle.net/jEADR/3717/ <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script> <select id="e1" class="select2" 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 id="e2" class="select2" 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> <style> #e2 .select2-results{ font-size:4px; } </style> <script> $(".select2").select2(); </script> 解决方案： http://jsfiddle.net/jEADR/3730/ <select id="e1" class="select2" 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 id="e2" class="select2" 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> $(".select2").select2(); $("#e2").select2({ dropdownCssClass: "myFont" }); </script> .myFont{ font-size:4px; } 我发现这个问题的最佳答案是将选择包装在 div 中并按如下方式设置 CSS。 CSS： .fooSelect { display:inline; } .fooSelect .select2-selection__rendered { font-size:1.2em; } 其他代码： <div class="fooSelect"><select id="e1" class="select2" 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></div> <script> $("#e1").select2(); </script> 我的改变在这里 只需添加到每个选项类并使用它即可。 在js文件上 $("#e1 option,#e2 option").addClass("font-size-4"); $(".select2").select2(); 在 CSS 文件上 .font-size-4{ font-size:4px; } 通过尝试你的小提琴，我也在 chrome 开发工具的帮助下得出了这个答案。另外 select2 需要 jQuery 才能运行。 参见下面的示例： $(".sample").select2({ width: '200px', theme: "classic" }); /* Select option */ .select2-results__option { font-size: 30px; } <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <select class="sample"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select> ul.select2-results__options li{ font-size:13px; } 我用这个。也许可以帮忙： .select2-dropdown { font-size: 12px; } .select2-container--default .select2-selection--multiple { font-size: 11px; } 我尝试过并且成功了 这是我改变的方式 $(document).ready(function () { $('.select2,.select2-container,.select2-container--default').css({ "font-size": "12px" }); }); 使用下面的 CSS 选择器。但我更改了此示例的字体大小值，因为某些浏览器不会显示 4px 的字体（有最小设置） #e2.select2, #e2.select2 option { font-size:32px; } <select id="e1" class="select2" 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 id="e2" class="select2" 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> #e2.select2 { font-size: 25px; }​

Form Repeater 破坏 Select2 下拉 UI

我正在尝试重新初始化 Select2 以在表单中动态添加转发器项目。 Select2 插件在页面加载时工作正常，但是当我添加新的中继器项目时，Select2 下拉 UI 不工作

使用 django-select2 生成带有图片的下拉列表

我正在尝试采用另一种方法来解决我在下面描述的使用 django-select2 模块的问题。 Django 选择字段使用图片而不是不显示的文本 我有一个 django 模型...

为entityType添加更多选项

我正在开发基于 Symfony 4 和 Select2 库的应用程序。 在我的 src/Form/PostType.php 文件中，我声明了字段标记，用户应该能够在其中设置预先声明的标记之一或添加新标记（按类型 ta...

Select2 正在复制我的下拉列表

Select2 正在复制我的下拉列表，因此我既有原始选择列表，也有 select2 选择框，我无法在项目之外重新创建它，因此它可能是一个导入...

无法使用模态在搜索 select2 中输入任何文本

当我尝试从 Select2 搜索下拉列表时，我无法在其中输入任何文本。 这是我的html： 当我尝试从 Select2 搜索下拉列表时，我无法在其中输入任何文本。 这是我的html： <div class="mb-3 custom-select2" id="branch_field"> <label class="form-label" style="color: #8B8B8B; font-size: 12px;">Cabang / POS</label> <select class="form-select disabled required" data-width="100%" id="branch" name="branch" style="font-size: 14px;"> <option></option> <?php if (count($branch) > 0) { foreach ($branch as $val) { echo '<option value="' . $val->BranchID . '">' . $val->BranchFullName . '</option>'; } } ?> </select> <div class='notif_info'><span class="text-danger"><i class="material-icons fs-6 m-1 text-danger">warning</i>Cabang / POS tidak boleh kosong</span></div> </div> 我尝试放置 dropdownParent 但仍然不起作用： $('#branch').select2({ dropdownParent: $("#mappingModal"), placeholder: "Pilih Cabang / POS" }); Hapus itu bg tabindex="-1"

模式搜索框中的 select2 无法像禁用一样工作

我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用一样 我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用了 <div class="modal fade" id="m_modal_1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 这是我的模态代码 $('#m_modal_1').on('shown.bs.modal', function () { $('#id_golongan').select2({ placeholder: "Pilih Golongan" }) }); 这是我的JS 我已经摆脱了 tabindex="-1" 并使用了 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 但不起作用，如果我使用 dropdownParent: $("#modal_penguasaan") 当我点击时模态消失 我该怎么做才能使当我单击 select2 时模式不会消失并且搜索框正常工作 这就是我解决问题的方法；而不是在模式中删除 tabindex="-1"： 我编写了以下代码，它适用于 Bootstrap 版本 >5.2： $(document).ready(function () { $.fn.modal.Constructor.prototype.enforceFocus = function () {}; $("#single-select-field").select2({ theme: "bootstrap-5", placeholder: "Select a category", allowClear: true, dropdownParent: $("#addModal") //ID of the Modal, }); });

使用 select2 javasript 进行动态输入，并从数据库获取数据

如何使用 select2 和 javascript 进行动态输入，数据从数据库获取，如图所示 我尝试用javascript制作，我尝试在javascript中使用动态输入，我制作变量函数ht...

Select2 选项 HTML 下拉列表的格式

我看到一些我无法解释的东西。 我正在使用 Select2 作为可搜索的下拉字段。 我正在尝试使用不同的值字符串（而不是文本）来配置选项。 我...