在頁面加載時使用不同的值和標籤設置listbox值

Question

我想在頁面加載時通過ajax調用加載值的下拉列表框中設置表單值。我被建議在另一個線程中使用addOption來處理不同的問題，但不幸的是，該選項對我來說不起作用，因爲在這種情況下數據ID和數據名稱是不同的，並且我只在呈現表單時獲取數據ID。我注意到addOption代碼在ajax請求發回數據之前得到執行。

以下是該項目的代碼片段。有沒有辦法在ajax請求完成後設置值？

HTML

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

人口數據，JavaScript代碼通過Ajax調用返回

$('[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); 
      } 
     }); 
    }, 
}); 

數據

id name 
1 USA 
2 China 
3 Japan 

以下是我值設置代碼我要工作

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

有valueField和labelField屬性是一樣的，我可以用以下addOption方法在另一篇文章建議，但因爲我只得到編號後窗體渲染，我不能使用下面的代碼。

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" 

讓我們分割值，並將其重新格式化爲對象selectize喜歡：

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應該是具有在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