Question

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

以下是项目的代码段。有没有办法在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

您可以使用加载方法通过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

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

2 个答案: