Select2是基于jQuery的选择框的替代品。它支持搜索，远程数据集和无限滚动结果。
如何初始化具有相同类的页面上的所有 Select2 下拉列表
我正在使用 http://ivaynberg.github.io/select2/ 中的 Select2 现在我正在初始化下拉菜单，如下所示： $(文档).ready(函数() { $('.form_control').select2({ </desc> <question vote="2"> <p>我正在使用来自 <a href="http://ivaynberg.github.io/select2/" rel="nofollow">http://ivaynberg.github.io/select2/</a></p> 的 Select2 <p>现在我正在初始化下拉菜单，如下所示：</p> <pre><code> <script> $(document).ready(function() { $('.form_control').select2({ minimumResultsForSearch: -1 }); }); </script> </code></pre> <p>问题是，我有一个页面动态生成基于下拉菜单的订单，因此我将在同一页面上有多个具有相同类的下拉菜单和表单，如下所示：</p> <pre><code><select id="order_status" class="form-control" name="order_status"> <option value="">Option 1</option> <option value="">Option 2</option> </select> </code></pre> <p>当我这样做时，第一个下拉列表初始化得很好，但同一页面上的所有其他下拉列表都没有初始化。如何让它初始化所有 form_control 下拉列表？</p> <p>JSFiddle：<a href="http://jsfiddle.net/hryoy8rc/1/" rel="nofollow">http://jsfiddle.net/hryoy8rc/1/</a></p> </question> <answer tick="false" vote="4"> <p>它是当前版本中的一个错误，我在使用 4.0.0 时遇到了同样的问题，它将解决您的问题： <a href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js</a></p> </answer> <answer tick="false" vote="3"> <p>尝试下面的代码...</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>$('.form_control').each(function(index, element) { $(this).select2({ minimumResultsForSearch: -1 }); });</code></pre> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="order_status" class="form-control" name="order_status"> <option value="">Option 1</option> <option value="">Option 2</option> </select></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>我最终为每个下拉列表提供了一个动态生成的 ID，例如 drop_003，然后在主体内将其初始化，如下所示：</p> <pre><code><script> $('#drop_003').select2({ minimumResultsForSearch: -1 }); </script> </code></pre> </answer> <answer tick="false" vote="0"> <p>我正在使用 Select2 4.0.2 版本，此代码片段对我有用。它将把页面中的所有 select 元素初始化为 Select2。</p> <pre><code>$(document).ready(function () { $('select').select2(); }); </code></pre> </answer> <answer tick="false" vote="0"> <p>为了动态生成框，我必须实际循环选项而不是使用助手。</p> <p>解决方案在这里：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$('.myselect').select2(); </code></pre> <pre><code><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> <form action="" method="POST" role="form"> <p> working boxes </p> <select class="form-control myselect"> <option>Service 1</option> <option>Service 2</option> </select> <br> <br> <select class="form-control myselect"> <option>Service 1</option> <option>Service 2</option> </select> </form></code></pre> </div> </div> <p></p> </answer> </body></html>
我正在努力解决有关我创建的编辑页面的下拉列表的问题。文本字段很好并且总是加载，但是下拉菜单确实是间歇性的，有时会加载一些......
我有一个带有 GET 方法的 API sewatanah/getprovinsi，它将返回： [{"id":"0","text":""},{"id":"11","text":"ACEH&...
我为 Select2 Selection 创建了一个自定义适配器，我想在其中直接在选择而不是下拉列表中显示输入字段。 $.fn.select2.amd.define('SearchableSingleSelection', [ '选择...
使用 select2 时不显示下拉列表（使用 Thymleaf 和 Bootstrap5）
我的脚本代码如下 函数查找部门（）{ $("#department").select2({ dropdownPosition: '下方', 占位符：“部门”， 允许清除：真， ...
举个例子。如果有一个选项是“Eyes Nose”，那么我想搜索输入为“Ey No”的选项。 Select2 无法在此处建议该选项。 默认情况下，如果我们只是...
我有一个使用 Jquery 插件 Select2 的下拉菜单。下拉工作正常。问题是我有几个使用 Select2 插件的下拉列表。所有这些下拉菜单都具有相同的类名。我...
使用 bootstrap 5.2 将 select2 包裹在输入组中时，强制 select2 保持在 col 约束内
图像显示了实际发生的情况。这只会发生，因为我尝试将 select2 与 bootstrap5 输入组一起使用。 在输入组中尝试 flex-wrap: nowrap 最终会推动刷新对接......
有没有办法在不触发change事件的情况下加载select2为默认值？ 目前，我正在做： $('#mylist').val(2).trigger("改变"); 但这会造成延迟，用户会...
抱歉，找不到解决方法。 每当我尝试进行一些搜索时，select2 都会显示“无法加载结果”。 我认为我的 ajax 设置有误 HTML: 抱歉，找不到解决方法。 每当我尝试进行一些搜索时，select2 都会显示“无法加载结果”。 我认为我的ajax设置是错误的 html: <select class="js-data-example-ajax form-control" multiple="multiple"></select> 剧本： $(".js-data-example-ajax").select2({ ajax: { url: '@Url.Action("LoadCity", "Addresses")', dataType: 'jsonp', delay: 250, data: function(params) { return { q: params.term, // search term page: params.page }; }, processResults: function(data) { return { results: data }; }, cache: true }, minimumInputLength: 1, }); 添加 08.07.2016 一些更改ajax设置： dataType: 'jsonp' 到 dataType: 'json' 并添加 type: 'GET', 现在没有消息“无法加载结果”，也没有结果 根据你最后的评论。处理结果应返回一个具有结果键的对象。 所以应该是： return { results: [{id: 1, text: 'Test'}] } 我最近在使用 4.0.5 版本时遇到了完全相同的问题 这是从版本 4.0.6 开始解决的组件中的一个已知错误 来自 Github 官方仓库： 修复 AJAX 数据源错误#4356 更新我的本地版本的 select2 组件解决了这个问题。 我有这个工作 select2，我昨天已经实现了它，它可能对你有帮助。 select2_common('.accounts','Account & Description'); function select2_common(selector,placeholder) { $(selector).select2({ minimumInputLength:2, placeholder:placeholder, ajax: { url: "your_url_here", dataType: "json", delay: 200, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (data) { // console.log(data); return { results: $.map(data, function(obj) { if(obj.id!=0){ // console.log(obj); return { id: obj.id, text: obj.name }; } else {return {id: obj.id, text: obj.name}} }) }; }, cache: true }, debug:false }); } //And your result should be in this form, from your method.... //I am using laravel php framework. public function getAccountDetail(Request $request) { $q = $request->input('q'); $result=[]; if (isset($q) && $q != '') { /*---------- Search by account code or title ----------*/ $data = DB::table('acc_accounts')->select('acc_id','acc_code','acc_title') ->where('acc_code', 'like', '%' . $q . '%') ->orWhere('acc_title', 'like', '%' . $q . '%') ->limit(10)->orderBy('acc_code')->get(); foreach ($data as $key => $value) { $new1 = array('id' => $value->acc_id, 'name' => $value->acc_code.' ('.$value->acc_title.')' ); array_push($result,$new1); } print(json_encode($result)); } }
select2 > 如何更改原型函数“MultipleSelection.prototype.selectionContainer”
我使用基于 jQuery 的库 Select2。 在库 https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.js 中定义了以下函数： 多选.原型.
我从 chosen 迁移到 select2 插件，因为它对我来说效果更好，但与 chosen 相比，它的文档非常差。谁能告诉我应该使用什么选项来制作 select2
我正在使用 select2 并且一切正常。 现在我想创建一个带有标签选项的 select2 输入字段： $(文档).ready(函数() { $('.dropdown').val(null).trigger("改变"); $('.dro...
我使用 vuejs3 和 select2，vue js 不适用于 select2 库。对于这个问题，我使用隐藏类型的输入。代码： 我使用 vuejs3 和 select2，vue js 不适用于 select2 库。对于这个问题，我使用隐藏类型的输入。代码： <select class="form-select" data-control="select2" id="trainingevents" data-placeholder="choose ..."> <option></option> <option v-for="event in events" :value="event.id">{{ event.event_title }}</option> </select> <input type="text" id="hiddenInputEvent"> I write js code in mounted() in vue js for when select changed i get value of option and add it to input with type hidden.代码： $('#trainingevents').on('change',function(){ var optionsValue = this.options[this.selectedIndex].value; var getInputValue = document.getElementById('hiddenInputEvent').value; var tmp = document.getElementById('hiddenInputEvent').value = getInputValue + ',' + optionsValue; }); 我的 vuejs 代码是： export default{ name: 'TrainingeventRegister', data(){ return { users: '', events: '', selectedEvent: '', selectedEvents: [], totalSalary: 0, } }, methods: { }, mounted(){ axios .get('/load/users') .then(response => (this.users = response.data)); axios .get('/load/events') .then(response => (this.events = response.data)); $('#trainingevents').on('change',function(){ var optionsValue = this.options[this.selectedIndex].value; var getInputValue = document.getElementById('hiddenInputEvent').value; var tmp = document.getElementById('hiddenInputEvent').value = getInputValue + ',' + optionsValue; }); } } 现在我的问题是如何从这样的更改 jquery 事件中访问 data() 中的 selectedEvent 变量： mounted(){ axios .get('/load/users') .then(response => (this.users = response.data)); axios .get('/load/events') .then(response => (this.events = response.data)); $('#trainingevents').on('change',function(){ var optionsValue = this.options[this.selectedIndex].value; var getInputValue = document.getElementById('hiddenInputEvent').value; var tmp = document.getElementById('hiddenInputEvent').value = getInputValue + ',' + optionsValue; this.selectedEvent = tmp // when I use this line i get undefine this.selectedEvent }); } 当我使用this.selectedEvent = tmp时，我会取消定义this.selectedEvent。 你对这个挑战有什么看法？ 谢谢。
select2 on select data-select2-id attribute 添加到所有 div before select option
我正在使用 select2，当有人在选择下拉列表中选择值时。 select2 将 data-select2-id 添加到 select2 之前的所有 div 中，不相同的 data-select2-id 值但每次都增加。 有一个...
我正在使用 select v4.0.3。如何获取 select 元素的替换/先前值？我已经附加了一个“更改”侦听器，但我似乎找不到以前的值。
我想要同步两个 select2，可用选项不在选定选项中 链接 http://jsfiddle.net/qh71m25y/1/ 我想在下拉菜单中同步我保存相同的选项，请显示图像 (
我有一个正在使用 Select2 的选择控件，但是，当我加载页面时，它会断断续续... 首先它看起来像 然后它看起来像 我怎样才能让它看起来像第二张图片，没有...
filter select2 result based on logged user
我的 Django 表单中有一个 select2 输入，我想根据登录用户过滤 select2 选项 例如，我希望用户 1 看到选项 1 和 3，但用户 2 投票 1 和 3 这是ess...
请原谅我缺乏知识，因为我对网络开发还很陌生。 我正在尝试捆绑所有第 3 方包，其中包括 select2 等。 该捆绑包适用于其他包，如 jqu ...