如何使用 ajax 的结果设置选定字段的值？

Question

我看过很多关于如何为 select 框设置默认值的帖子 selectize，但是如何设置 selectized [=] 的值45=] 框，其中包含我从 ajax 调用中返回的值？

我的函数如下所示：

$('#import_search').change(function(){
    $.ajax({ 
        url: 'import_ajax.php',
        type: 'POST',
        data: { import_search: $('#import_search option:selected').val() },
        dataType: 'text',
        timeout: 60000,
        success: function(data) {
            var result = JSON.parse(data);  
            var project = result['selected_project'];
            $.each(result.data[0], function(key, value) { 
                $('#' + key).val(value);
         ->   //$('#' + whatever the new selectize ID is).setValue(value from db)
            });
        }
    }); 
});


....
//selectize the select boxes
$('#Customer').selectize({
    create: true,
    sortField: 'text'
});

我让它变得简单，因为我的字段 ID 与数据库中的列名匹配，

I.E $('#' + key).val(value); 行。

因此，当我取回具有 Customers 键的内容时，如何将 select 化客户 select 框的值设置为我从ajax打电话？

select 框在加载时 select 化，并根据数据库中的内容正确填充，这是 "import" 先前项目和预设设置的功能基于 selected 项目的用户的一切。

我不想添加任何新值，这些值已经在 select 化的 select 框中作为 "options"，我需要做的就是设置它们对于我从 ajax 调用中得到的结果，它们将始终匹配，因为它们最初是从对数据库的查询中设置的。

我试过 setValue() 但我不确定我做的对不对。请帮忙！

这是一个专门针对 selectize jquery 附加组件的问题，selectize 更改了 class、id 以及任何特定字段上的许多内容。这与提出的重复问题不同。

-编辑- 我已经修改了我的脚本，这是我目前所拥有的。

$(document).ready(function(){
    $('#import_search').change(function(){
        var $select = $('#Customer').selectize();
        var selectize = $select[0].selectize;
        $.ajax({ 
            url: 'import_ajax.php',
            type: 'POST',
            data: { import_search: $('#import_search option:selected').val() },
            dataType: 'text',
            timeout: 60000,
            success: function(data) {
                var result = JSON.parse(data);  
                var project = result['selected_project'];
                $.each(result.data[0], function(key, value) { 
                    $('#' + key).val(value);
                    if (selectizeInstances[key]) {
                        alert(selectizeInstances[key]);
                        selectizeInstances[key].setValue(value);
                    }
                });
            }
        });
    });     
    var selectizeInstances = [];
    var selectizeControl = $('#Customer').selectize({
        create: true,
        sortField: 'text'
        });
    selectizeInstances['Customer'] = selectizeControl[0].selectize; 
});

Answer 1

确保 $('#import_search').change(function(){... 在 DOM 准备好之后发生（例如在 $(document).ready() 的回调函数中。

要在 selectize 控件上调用 setValue()，看来我们需要捕获控件的一个实例。根据 the api documentation，我们可以像下面的例子那样做：

var selectizeInstances = [];
var selectizeControl = $('#Customer').selectize({
    create: true,
    sortField: 'text'
});
selectizeInstances['Customer'] = selectizeControl[0].selectize;

然后替换行：

//$('#' + whatever the new selectize ID is).setValue(value from db)

像这样检查：

if (selectizeInstances[key]) {
    selectizeInstances[key].setValue(value);
}

尝试 this plunker - 更改 搜索方法 select 列表以查看 Customer select 输入改变了。

或者这个例子应该演示该技术，但没有 AJAX 请求：

$(document).ready(function() {
  $('#import_search').change(function() {
    var index = $(this).val();
    Array.prototype.forEach.call(Object.keys(selectizeInstances), function(key) {
      var indexOptions = Object.keys(selectizeInstances['Customer'].options);
      if (selectizeInstances[key]) {
        var value = indexOptions[index];
        $('#' + key).val(value);
        selectizeInstances[key].setValue(value);
      }
    });
  });
  //store the reference to the selectize control in an array so it can be utilized dynamically later:
  var selectizeInstances = [];
  var selectizeControl = $('#Customer').selectize({
    create: true,
    sortField: 'text'
  });
  selectizeInstances['Customer'] = selectizeControl[0].selectize;
});

<link href="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/css/selectize.default.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/js/standalone/selectize.js"></script>
<div>
  Search method:
  <select id="import_search">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div>

Customer:
<select id="Customer">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="rat">Rat</option>
</select>

如何使用 ajax 的结果设置选定字段的值？

How to set values of selectized fields with results from ajax?

javascript

jquery

ajax

selectize.js