尝试使用 Select2 并在多个项目输入/文本字段上收到此错误： "query function not defined for Select2 undefined error" 答案 在此谷歌群组主题中涵盖 这个问题是由于额外的div select2被添加。 在 select2 css 标识符前面加上特定标签名称"select"： $('select.form-select').select2(); 来自: stackoverflow.com
我对UI-Select2下拉列表的模型（来自UI-Bootstrap）的模型有一个手表设置。手表会在负载上发射，但没有在数据更改上发射，我不知道为什么。 这不是$不应用模型更改的通常问题，或者不使用第三个参数进行平等比较（至少从我的代码中）。 我需要做什么才能开火？ 这是一个证明这个问题的杂物。 答案 我修复了一些东西。 http://plnkr.co/edit/5Zaln7QT2gETVcGiMdoW?p=preview JS var myMod = angular.module("myApp",[]).controller("MainController", function($scope){ $scope.myModel = {selectedId:null}; }).controller("DetailController",function($scope){ $scope.items = [1,2,3,4]; $scope.watchHitCount = 0; $scope.$watch('myModel.selectedId', function(newVal, oldVal){ console.log(newVal + " " + oldVal); $scope.watchHitCount++; },true); }); index.html <body ng-app="myApp"> <div ng-controller="MainController"> <ng-include src="'detail.html'" ng-controller="DetailController"></ng-include> </div> </body> 细节.html <pre>watch hit: {{watchHitCount}}</pre> <pre>selected value: {{myModel.selectedId}}</pre> <select ng-model="myModel.selectedId" ui-select2=""> <option></option> <option ng-repeat="item in items" value="{{item}}">{{item}}</option> </select> 它在抱怨没有找到控制器，因此我按照命名的ng-app和声明的模块在其上定义了控制器。 **I also added an object to hold the value in your model....
我正在使用jQuery Select2多选择下拉列表。我需要从代码下拉中选择所有选项。基本上，有一个选择所有复选框，必须在其中实现此功能，我想从此复选框中选择/取消选择选项。 答案 github上的线程中有一个描述。引用（https://github.com/ivaynberg/select2/issues/195经过莫塔达AK），这使您可以在Ctrl+A上选择所有内容 $(document).on("keypress",".select2-input",function(event){ if (event.ctrlKey || event.metaKey) { var id =$(this).parents("div[class*='select2-container']").attr("id").replace("s2id_",""); var element =$("#"+id); if (event.which == 97){ var selected = []; element.find("option").each(function(i,e){ selected[selected.length]=$(e).attr("value"); }); element.select2("val", selected); } else if (event.which == 100){ element.select2("val", ""); } } }); 来自: stackoverflow.com
你好的朋友，这是我的代码： <select id='first'> <option value='1'> First </option> <option value='2'> Second </option> <option value='3'> Three </option> </select> 这是我的Select2代码： $("#first").select2(); 以下是获得选择值的代码。 $("#first").select2('val'); // It returns first,second,three. 这是返回的文字first,second,three我想得到1,2,3。 意味着我需要选择框的值，而不是文本。 答案 $("#first").val(); // this will give you value of selected element. i.e. 1,2,3. 来自: stackoverflow.com
Select2 成功加载列表中的所有项目，这是我在页面加载时尝试选择特定值时发现的问题。 :: 将 select2 放在特定的 html 元素中，即使加载了所有项目也不会选择任何值。 $('#my_id').select2(); :: 加载页面时，我试图显示选定的特定项目，但无法按预期工作，因为即使选择了， select2 也不会显示它。 $('#my_id').val('3'); //select the right option, but doesn't render it on page loads. 如何在页面加载时弹出选定的选项？ 提前致谢。 更新 :: 我如何加载所有 select2 项目（抱歉，它是玉，不是纯 HTML）： label(for='category') Category span.required * select(id='category', style='width:230px', name='category') option(value='') - Select - each cat in categories option(value='#{cat.id}') #{cat.description} P.S.：我的列表中的所有项目均已加载。 :: 我如何初始化 select2： 只需将以下行代码放入我的 javascript 中即可成功： $('#category').select2(); :: 我如何尝试选择特定值： 第一次尝试： $('#category').select2( { initSelection: function(element, callback) { callback($('#field-category').val()); } } ); 第二次尝试：...
我有一个带有多个文本输入和一些 select2 元素的表单。 到目前为止，这是我尝试过的： $("#myid").select2().on('select2-focus', function(){ $(this).select2('open'); }); 但使用此代码会使下拉列表在做出选择后再次打开。 答案 v4.0 的工作代码^^*(包括4.0.7)^^ 下面的代码将打开菜单最初的焦点，但当菜单关闭后选择重新聚焦时，不会陷入无限循环。 // on first focus (bubbles up to document), open the menu $(document).on('focus', '.select2-selection.select2-selection--single', function (e) { $(this).closest(".select2-container").siblings('select:enabled').select2('open'); }); // steal focus during close - only capture once and stop propogation $('select.select2').on('select2:closing', function (e) { $(e.target).data("select2").$selection.one('focus focusin', function (e) { e.stopPropagation(); }); }); 解释 防止无限焦点循环 Note ： 这focus事件是发射两次 当按 Tab 键进入该字段时 再次使用打开的下拉菜单进行选项卡以恢复焦点时 我们可以通过查找焦点事件类型之间的差异来防止无限循环。 以跨浏览器友好的方式做到这一点很困难，因为浏览器发送不同的信息以及不同的事件，而且 Select2 对其内部事件触发进行了许多微小的更改，这会中断之前的流程。 似乎有效的一种方法是在closing菜单事件并用它来捕获即将发生的事件focus事件并防止它在 DOM 中冒泡。focus事件冒泡一直到document...
我有两个链接的选择：第一个选择的每个值决定哪些项目将显示在第二个选择中。 第二个选择的值存储在二维数组中： [ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...], [{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...], ... ] 第一个选择值确定用于填充第二个选择的索引。 阅读文档我认为我需要使用"数据"选项…但不确定示例如何在初始化时加载数组数据，如果我在初始化后尝试执行相同的操作，它似乎不起作用。 HTML Attribute: <select name="attribute" id="attribute"> <option value="0">Color</option> <option value="1">Size</option> </select> Value: <select name="value" id="value"></select> <script> var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...], [{"id":"1","text":"9"},{"id":"1","text":"10"},...], ]; $('#attribute').select2().bind('change', function(){ // Here I need to change `#value` items. $('#value').select2('data',data[$(this).val()]); // This does not work ); $('#value').select2(); </script> 答案 我已经为您制作了一个示例，展示了如何做到这一点。 注意js,我改变了 <input id="value" type="hidden" style="width:300px"/> 我正在触发change获取初始值的事件 $('#attribute').select2().on('change', function() { $('#value').select2({data:data[$(this).val()]}); }).trigger('change'); Code Example Edit: 在 select2 的当前版本中，类属性从隐藏输入转移到 select2 创建的根元素中，甚至select2-offscreen将元素定位到页面限制之外的类。...
$("#e2").select2("val")返回值，但我不想得到.$listtypes['name'] .以太来自数据名称或选项标签显示。 我想获取所选选项的选项数据名称，如何实现？ 这是我的选项生成器 foreach($core->list_types() as $listtypes){ echo " <option data-name='".$listtypes['name'] ."' value='".$listtypes['id']."'> ".$listtypes['name'] ." </option>"; } 答案 你可以用这个 $("#e2 option:selected").text(); 来自: stackoverflow.com
我有一个类型为 select2 的列表。 <select id="list" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true"> <optgroup label="Types"> <option value="None">None</option> <option value="1">One</option> <option value="2">Two</option> </optgroup> </select> 我想禁用具有的选项value=1所以我确实喜欢这个 $("#list>optgroup>option[value='1']").prop('disabled',true); Result:// <option value="1" disabled>One</option> 它工作正常；但如果我想重新启用禁用的选项，我尝试了下面的代码，但 select2 选项仍然被禁用。 $("#list>optgroup>option[value='1']").prop('disabled',false); $("#list>optgroup>option[value='1']").removeProp('disabled'); Result:// <option value="1">One</option> 但奇怪的是该选项的禁用属性被删除。 不知道如何解决这个问题。 更新：如果我检查 select2 的 DOM，即使删除禁用后它也具有此属性。 <li class="select2-results__option" id="select2-template-type-list-result-4qd3-merge" role="treeitem" aria-disabled="true">One</li> 如果我做**aria-disabled=“false”**它将启用。 答案 可能实现这一目标的最简单方法是调用.select2(...)更改禁用属性后再次在元素上。 http://jsfiddle.net/xoxd2u15/ 由于选择2取代带有自定义 HTML 元素的原始选择字段（并隐藏原始元素），并且显然不会在调用后不断"观察"原始选择元素的选项以了解其禁用状态的变化，您必须在更改状态后再次调用它 来自: stackoverflow.com
我在项目中使用 Select2 来设置搜索表单中一些选择框的样式。 .select2-container .select2-choice .select2-arrow { background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303)); background-image: -moz-linear-gradient(top, #424242, #030303); background-image: -ms-linear-gradient(top, #424242, #030303); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303)); background-image: -webkit-linear-gradient(top, #424242, #030303); background-image: -o-linear-gradient(top, #424242, #030303); background-image: linear-gradient(#424242, #030303); } 我希望箭头是白色的，但不幸的是 Select2 对不同的图标使用背景图像，而不是 font-awesome 或类似的东西，所以没有办法只用 CSS 改变颜色。 将箭头设置为白色而不是默认的灰色的最简单方法是什么？ 我的另一个问题是如何更改选择框的高度。 答案 感谢评论中的建议。 $('b[role="presentation"]').hide(); 然后我在我的页面中添加了 font-awesome 并添加了我自己的向下箭头，同样是一行 javascript，以替换默认的箭头： $('.select2-arrow').append('<i class="fa fa-angle-down"></i>'); 然后使用 CSS 设置选择框的样式。 .select2-container .select2-choice { padding: 5px 10px; height: 40px; width: 132px; font-size: 1....
我正在使用Select2 3.3.2 我在选择中有很长的选择。例子： <select id="e1"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> <option value="WY">very long long long text</option> <option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option> </select> 目的是避免在下拉列表打开时包装选项。...
对于我更重要的选择，Select2中的搜索框很棒。但是，在一个例子中，我可以简单地选择4种硬编码的选择。在这种情况下，搜索框是多余的，看起来有些愚蠢。可以以某种方式隐藏它吗？我在线浏览了文档，在构造函数中找不到任何选择。 当然，我只需使用常规的HTML选择，但是为了保持一致性，我想在可能的情况下使用Select2。 答案 请参阅此线程https://github.com/ivaynberg/select2/issues/489，您可以通过将MinimumResultSforsearch设置为负值来隐藏搜索框。 $('select').select2({ minimumResultsForSearch: -1 }); 来自: stackoverflow.com
因此，我已经下载了Select2，我通过将其放入文件夹中，然后在检查控制台时将其放入我的网站上（我可以看到已加载的所有脚本），然后将其加载到我的网站上。 我去了他们的文档并复制了它，并添加了$("#e9").select2(); 但是，当我加载页面时，我会收到以下错误： TypeError: $(...).select2 is not a function $("#e9").select2(); 还有其他人经历过这样的事情吗？ 其他信息在这里是我的脚本： jQuery(document).ready(function(){ var max_amount = parseFloat($('#max_amount').val()); $( "#item_amount" ).keyup(function() { if($(this).val() > max_amount){ $(this).val( max_amount); } if( /\D/.test($(this).val()) ){ alert('Må kun indeholde tal!'); $(this).val(''); } if($(this).val()== '0'){ alert('Må ikke være 0!'); $(this).val(''); } }); $("#e1").select2(); }); function addToBasket(){ var amount = $('#item_amount').val(); if(amount == ""){ amount = 1; } if(amount > 0){ $.ajax({ type: 'POST', url: myBaseUrl + 'Products/addItemToBasket', dataType: 'json', data: { id: window....
当我在Bootstrap Modal中使用Select2（输入）时，我无法在其中输入任何内容。就像残疾人吗？在模态之外的Select2外部工作正常。 工作示例：http://jsfiddle.net/byJy8/1/代码： <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Panel</h3> </div> <div class="modal-body" style="max-height: 800px"> <form class="form-horizontal"> <!-- Text input--> <div class="control-group"> <label class="control-label" for="vdn_number">Numer</label> <div class="controls"> <!-- seleect2 --> <input name="vdn_number" type="hidden" id="vdn_number" class="input-large" required="" /> </div> </div> </form> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> JS $("#vdn_number").select2({ placeholder: "00000", minimumInputLength: 2, ajax: { url: "getAjaxData/", dataType: 'json', type: "POST", data: function (term, page) { return { q: term, // search term col: 'vdn' }; }, results: function (data) { // parse the results into the format expected by Select2....
有没有办法限制用户可以使用 Select2 添加到输入字段的标签数量？ 我有： $('#tags').select2({ containerCssClass: 'supplierTags', placeholder: "Usual suppliers...", minimumInputLength: 2, multiple: true, tokenSeparators: [",", " "], placeholder: 'Usual suppliers...', createSearchChoice: function(term, data) { if ($(data).filter(function() { return this.name.localeCompare(term) === 0; }).length === 0) { return {id: 0, name: term}; } }, id: function(e) { return e.id + ":" + e.name; }, ajax: { url: ROOT + 'Call', dataType: 'json', type: 'POST', data: function(term, page) { return { call: 'Helpers->tagsHelper', q: term }; }, results: function(data, page) { return { results: data....