用Ajaxselect2 4.0.0初始值

我有一个从Ajax数组中填充select2 v4.0.0。 如果我设置了select2的val，我可以通过javascriptdebugging看到它已经select了正确的项目（在我的例子中是＃3），但是这并没有显示在select框中，它仍然显示占位符。 在这里输入图像说明

而我应该看到这样的事情： 在这里输入图像说明

在我的表单字段中： 

<input name="creditor_id" type="hidden" value="3"> <div class="form-group minimal form-gap-after"> <span class="col-xs-3 control-label minimal"> <label for="Creditor:">Creditor:</label> </span> <div class="col-xs-9"> <div class="input-group col-xs-8 pull-left select2-bootstrap-prepend"> <select class="creditor_select2 input-xlarge form-control minimal select2 col-xs-8"> <option></option> </select> </div> </div> </div>

我的javascript： 

 var initial_creditor_id = "3"; $(".creditor_select2").select2({ ajax: { url: "/admin/api/transactions/creditorlist", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, c_id: initial_creditor_id, page: params.page }; }, processResults: function (data, page) { return { results: data }; }, cache: true }, placeholder: "Search for a Creditor", width: "element", theme: "bootstrap", allowClear: true }).on("select2:select", function (e) { var selected = e.params.data; if (typeof selected !== "undefined") { $("[name='creditor_id']").val(selected.creditor_id); $("#allocationsDiv").hide(); $("[name='amount_cash']").val(""); $("[name='amount_cheque']").val(""); $("[name='amount_direct']").val(""); $("[name='amount_creditcard']").val(""); } }).on("select2:unselecting", function (e) { $("form").each(function () { this.reset() }); ("#allocationsDiv").hide(); $("[name='creditor_id']").val(""); }).val(initial_creditor_id);

我怎样才能使select框显示选定的项目，而不是占位符？ 我应该把这个作为AJAX JSON响应的一部分吗？

过去，Select2需要一个名为initSelection的选项，该选项在使用自定义数据源时被定义，允许确定组件的初始select。 这在v3.5中适用于我。

你正在做的事情大部分都是正确的，看起来你遇到的唯一问题是在设置新值之后，你没有触发change方法。 如果没有change事件，Select2无法知道底层值已更改，因此只会显示占位符。 改变你的最后一部分 

 .val(initial_creditor_id).trigger('change');

应该解决你的问题，你应该马上看到UI更新。

这是假定你有一个<option>已经有了initial_creditor_id的value 。 如果您不select2和浏览器，实际上将不能更改该值，因为没有选项可以切换到，并且Select2不会检测到新的值。 我注意到你的<select>只包含一个选项，一个用于占位符，这意味着你将需要手动创build新的<option> 。 

 var $option = $("<option selected></option>").val(initial_creditor_id).text("Whatever Select2 should display");

然后将它附加到您初始化Select2的<select>上。 您可能需要从外部源获取文本，这是initSelection用于启动的地方，Select2 4.0.0仍然可以使用该文本。 就像一个标准的select，这意味着你将不得不使AJAX请求检索值，然后设置<option>文本dynamic调整。 

 var $select = $('.creditor_select2'); $select.select2(/* ... */); // initialize Select2 and any events var $option = $('<option selected>Loading...</option>').val(initial_creditor_id); $select.append($option).trigger('change'); // append the option and update Select2 $.ajax({ // make the request for the selected data object type: 'GET', url: '/api/for/single/creditor/' + initial_creditor_id, dataType: 'json' }).then(function (data) { // Here we should have the data object $option.text(data.text).val(data.id); // update the text that is displayed (and maybe even the value) $option.removeData(); // remove any caching data that might be associated $select.trigger('change'); // notify JavaScript components of possible changes });

虽然这可能看起来像很多代码，但这是你如何做非Select2select框，以确保所做的所有更改。

我所做的是更干净，需要做两个数组：

  • 一个包含一个带有id和一个文本的对象列表（在我的例子中，它的id和name，取决于你的templateResult）（它是从ajax查询中得到的）
  • 第二个只是一个ID数组（select值）

我使用第一个数组作为数据初始化select2，第二个作为val。

作为参数的示例函数是id：name的字典。 

 function initMyList(values) { var selected = []; var initials = []; for (var s in values) { initials.push({id: s, name: values[s].name}); selected.push(s); } $('#myselect2').select2({ data: initials, ajax: { url: "/path/to/value/", dataType: 'json', delay: 250, data: function (params) { return { term: params.term, page: params.page || 1, }; }, processResults: function (data, params) { params.page = params.page || 1; return { results: data.items, pagination: { more: (params.page * 30) < data.total_count } }; }, cache: true }, minimumInputLength: 1, tokenSeparators: [",", " "], placeholder: "Select none, one or many values", templateResult: function (item) { return item.name; }, templateSelection: function (item) { return item.name; }, matcher: function(term, text) { return text.name.toUpperCase().indexOf(term.toUpperCase()) != -1; }, }); $('#myselect2').val(selected).trigger('change'); }

您可以使用ajax调用来提供初始值，并使用jQuery的promise来做select2初始化。

被迫trigger('change')使我疯了，因为我在change触发器中有自定义代码，只有在用户更改下拉菜单中的选项时才会触发。 国际海事组织，改变不应该触发在初始设置一个初始值。

我挖深入，发现以下： https ： //github.com/select2/select2/issues/3620

例：

$dropDown.val(1).trigger('change.select2');

我还没有看到人们真正回答的一个场景是，如果选项是源自AJAX，如何进行预选，并且可以select多个。 由于这是AJAX预选的前往页面，我将在此添加我的解决scheme。 

 $('#mySelect').select2({ ajax: { url: endpoint, dataType: 'json', data: [ { // Each of these gets processed by fnRenderResults. id: usersId, text: usersFullName, full_name: usersFullName, email: usersEmail, image_url: usersImageUrl, selected: true // Causes the selection to actually get selected. } ], processResults: function(data) { return { results: data.users, pagination: { more: data.next !== null } }; } }, templateResult: fnRenderResults, templateSelection: fnRenderSelection, // Renders the result with my own style selectOnClose: true });

如果您正在使用templateSelection和ajax，其他一些答案可能无法正常工作。 似乎创build一个新的option元素和设置value和text不会满足模板方法时，您的数据对象使用除id和文本以外的其他值。

这是什么对我有用： 

 $("#selectElem").select2({ ajax: { ... }, data: [YOUR_DEFAULT_OBJECT], templateSelection: yourCustomTemplate }

看看这里的jsFiddle： https ://jsfiddle.net/shanabus/f8h1xnv4

在我的情况下，我不得不processResults因为我的数据不包含所需的id和text字段。 如果您需要这样做，您还需要通过相同的function运行您的初始select。 像这样： 

 $(".js-select2").select2({ ajax: { url: SOME_URL, processResults: processData }, data: processData([YOUR_INIT_OBJECT]).results, minimumInputLength: 1, templateSelection: myCustomTemplate }); function processData(data) { var mapdata = $.map(data, function (obj) { obj.id = obj.Id; obj.text = '[' + obj.Code + '] ' + obj.Description; return obj; }); return { results: mapdata }; } function myCustomTemplate(item) { return '<strong>' + item.Code + '</strong> - ' + item.Description; }

花了几个小时寻找解决scheme后，我决定创build自己的。 他是： 

  function CustomInitSelect2(element, options) { if (options.url) { $.ajax({ type: 'GET', url: options.url, dataType: 'json' }).then(function (data) { element.select2({ data: data }); if (options.initialValue) { element.val(options.initialValue).trigger('change'); } }); } }

你可以使用这个函数初始化select： 

 $('.select2').each(function (index, element) { var item = $(element); if (item.data('url')) { CustomInitSelect2(item, { url: item.data('url'), initialValue: item.data('value') }); } else { item.select2(); } });

当然，这里是html： 

 <select class="form-control select2" id="test1" data-url="mysite/load" data-value="123"></select>

它为我工作…

不要仅使用jQuery HTML：创build将显示为选定 值的选项值 。 如果ID在select2数据中 ，它将自动select。 

 <select id="select2" name="mySelect2"> <option value="mySelectedValue"> Hello, I'm here! </option> </select>

我添加这个答案主要是因为我不能评论以上！ 我发现这是@Nicki和她的jsfiddle， https: //jsfiddle.net/57co6c95/的评论，最终得到了这个为我工作。

除此之外，它给出了json所需格式的例子。 我必须做的唯一的变化是我的最初的结果被返回与另一个Ajax调用相同的格式，所以我不得不使用 

 $option.text(data[0].text).val(data[0].id);

而不是 

 $option.text(data.text).val(data.id);

为select2 4.0.3创build简单的ajax组合，其中包含de初始select的值 

 <select name="mycombo" id="mycombo""></select> <script> document.addEventListener("DOMContentLoaded", function (event) { selectMaker.create('table', 'idname', '1', $("#mycombo"), 2, 'type'); }); </script>

库.js 

 var selectMaker = { create: function (table, fieldname, initialSelected, input, minimumInputLength = 3, type ='',placeholder = 'Select a element') { if (input.data('select2')) { input.select2("destroy"); } input.select2({ placeholder: placeholder, width: '100%', minimumInputLength: minimumInputLength, containerCssClass: type, dropdownCssClass: type, ajax: { url: 'ajaxValues.php?getQuery=true&table=' + table + '&fieldname=' + fieldname + '&type=' + type, type: 'post', dataType: 'json', contentType: "application/json", delay: 250, data: function (params) { return { term: params.term, // search term page: params.page }; }, processResults: function (data) { return { results: $.map(data.items, function (item) { return { text: item.name, id: item.id } }) }; } } }); if (initialSelected>0) { var $option = $('<option selected>Cargando...</option>').val(0); input.append($option).trigger('change'); // append the option and update Select2 $.ajax({// make the request for the selected data object type: 'GET', url: 'ajaxValues.php?getQuery=true&table=' + table + '&fieldname=' + fieldname + '&type=' + type + '&initialSelected=' + initialSelected, dataType: 'json' }).then(function (data) { // Here we should have the data object $option.text(data.items[0].name).val(data.items[0].id); // update the text that is displayed (and maybe even the value) $option.removeData(); // remove any caching data that might be associated input.trigger('change'); // notify JavaScript components of possible changes }); } } };

和PHP服务器端 

 <?php if (isset($_GET['getQuery']) && isset($_GET['table']) && isset($_GET['fieldname'])) { //parametros carga de petición parse_str(file_get_contents("php://input"), $data); $data = (object) $data; if (isset($data->term)) { $term = pSQL($data->term); }else{ $term = ''; } if (isset($_GET['initialSelected'])){ $id =pSQL($_GET['initialSelected']); }else{ $id = ''; } if ($_GET['table'] == 'mytable' && $_GET['fieldname'] == 'mycolname' && $_GET['type'] == 'mytype') { if (empty($id)){ $where = "and name like '%" . $term . "%'"; }else{ $where = "and id= ".$id; } $rows = yourarrayfunctionfromsql("SELECT id, name FROM yourtable WHERE 1 " . $where . " ORDER BY name "); } $items = array("items" => $rows); $var = json_encode($items); echo $var; ?>

对于一个简单的语义解决scheme，我更喜欢用HTML定义初始值，例如： 

 <select name="myfield" data-placeholder="Select an option"> <option value="initial-value" selected>Initial text</option> </select>

所以当我打电话$('select').select2({ ajax: {...}}); 初始值是initial-value ，其选项文本是Initial text 。

我目前的Select2版本是4.0.3 ，但我认为它与其他版本有很好的兼容性。

嗨几乎是退出这个回去select3.5.1。 但最后我得到了答案！ 

 $('#test').select2({ placeholder: "Select a Country", minimumResultsForSearch: 2, ajax: { url: '...', dataType: 'json', cache: false, data: function (params) { var queryParameters = { q: params.term } return queryParameters; }, processResults: function (data) { return { results: data.items }; } } }); var option1 = new Option("new",true, true); $('#status').append(option1); $('#status').trigger('change');

只要确保新的选项是select2选项之一。 我通过json得到这个。

Interesting Posts