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

Question

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

以下是该项目的代码片段。 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 相同，我可以按照另一个 post 中的建议使用以下 addOption 方法，但由于我只是在表单呈现时获取 Id，因此我无法使用以下代码。

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

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

Answer 1

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

仅出于简化目的，让我们为输入指定一个 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"

让我们拆分值，并将其重新格式化为一个对象selectize likes:

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

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

Setting listbox value with different value and label upon page load

javascript

jquery

selectize.js