在页面加载时使用不同的值和标签设置列表框值

Question

我试图在页面加载时在下拉列表框中设置表单值，该下拉列表框通过 ajax 调用加载值。有人建议我在另一个线程中使用 addOption 来解决不同的问题，但不幸的是，该选项对我不起作用，因为在这种情况下数据 id 和数据名称不同，我只在呈现表单时获取数据 ID。我注意到 addOption 代码在 ajax 请求发回数据之前被执行。

以下是项目中的代码 sn-ps。 ajax请求完成后有没有办法设置值？

HTML

<select name="country" placeholder="Please Select Country  ..."></select>

数据填充，JavaScript 代码

$('[name="country"]').selectize({
    valueField: 'id',
    labelField: 'name',
    searchField: 'name',
    preload: true,
    create: false,
    render: {
        option: function(item, escape) {
            return '<div>' + escape(item['name']) + '</div>';
        }
    },

    load: function(query, callback) {
        $.ajax({
            url: '/countrydata',
            type: 'GET',
            error: function() {
                callback();
            },
            success: function(res) {
                callback(res);
            }
        });
    },
});

Ajax 调用返回的数据

id name
1  USA
2  China
3  Japan

以下是我想要工作的值设置代码

$('[name="country"]').selectize();
$('[name="country"]')[0].selectize.setValue(3);

如果 valueField 和 labelField 相同，我可以按照另一篇文章中的建议使用以下 addOption 方法，但由于我只在表单呈现时获取 Id，我无法使用以下代码。

var item  = {};
item.id   = countryName;
item.name = countryName;

$('[name="country"]')[0].selectize.addOption(item);

Answer 1

您可以使用 load 方法通过 selectize.js programmatic API 设置选项。考虑调用 clear() 和 clearOptions() 方法来重置选定的值和旧选项。

仅出于简化目的，让我们为输入提供一个 id：

<select id="country" name="country" placeholder="Please Select Country  ..."></select>

假设 AJAX 响应是：

id name
1  USA
2  China
3  Japan

等于拥有：

var responseText = "id name\n1  USA\n2  China\n3  Japan"

让我们拆分值，并将其重新格式化为对象选择喜欢：

var selectizeContent = [];
// Every line will have one value:
responseText.split('\n').forEach(function(line){
    // split current line to id and value:
    var parts = line.split(' ');
    // Verify that ID is numeric, to skip the first line:
    if(!isNaN(parseInt(parts[0]))){
        selectizeContent.push({
            value: parts[0],
            text: parts[1]
        });
    }
});

一旦我们准备好selectizeContent：

// Using the ID we gave the select, or any other selector:
var selectize = $("#country")[0].selectize;
selectize.clear();
selectize.clearOptions();
selectize.load(function(callback) {
    callback(selectizeContent);
});

执行我们刚刚在您的 Ajax 回调中执行的所有操作，我希望它会起作用。

---

selectizeContent 应该是一个对象数组，这些对象在 select 初始化时具有在 valueField 和 labelField 选项中配置的属性。例如，下面是 selectizeContent 在默认 valueField 和 labelField 选项下的样子：

var inviteList = [
    {
        text: 'USA',
        value: 1
    },
    {
        text: 'China',
        value: 2
    },
    {
        text: 'Japan',
        value: 3
    }
];

Answer 2

你可以根据selectize.js的源码使用这个功能

function setSelectizeValue(selector, value){
    var select = $(selector)[0].selectize;
    // from the lines 1731-1737 of selectize.js
    select.lastQuery = null;
    select.setTextboxValue("");
    select.addItem(value);
    select.setActiveOption(select.getOption(value));
}

例如。

HTML

<select name="country" placeholder="Please Select Country  ..."></select>
<br/>
<button id="select-usa">Select USA</button>
<button id="select-china">Select China</button>
<button id="select-japan">Select Japan</button>

JS

$('[name="country"]').selectize({
    valueField: 'id',
    labelField: 'name',
    searchField: 'name',
    preload: true,
    create: false,
    render: {
      option: function(item, escape) {
        return '<div>' + escape(item['name']) + '</div>';
      }
    },

    load: function(query, callback) {
        var res = [{"id":1,"name":"USA"},{"id":2,"name":"China"},{"id":3,"name":"Japan"}];
        callback(res);
    },
  });

$("#select-usa").click(function(ev){
    setSelectizeValue('[name="country"]',1);
});
$("#select-china").click(function(ev){
    setSelectizeValue('[name="country"]',2);
});
$("#select-japan").click(function(ev){
    setSelectizeValue('[name="country"]',3);
});

JSFiddle demo