ajaxの結果で選択フィールドの値を設定する方法は？

Question

私は、選択ボックスI selectizeのデフォルト値を設定する方法について多くのスレッドを見てきましたが、選択した選択ボックスの値をajax呼び出しから返す値でどのように設定しますか？

My機能は、次のようになります。

$('#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が$('#' + key).val(value);ラインデータベースの列名、

すなわちと一致するので、私はそれが簡単になりました。

Customersキーを持つものが得られたら、選択した顧客の選択ボックスの値をajax呼び出しから返す値に設定するにはどうすればよいですか？

セレクトボックスは、ロード時に選択され、データベースのものから正しく読み込まれます。これは、以前のプロジェクトから設定を「インポート」し、選択したプロジェクトに基づいてユーザーのためにすべてをあらかじめ設定する機能です。

私は新しい値を追加するつもりはありません、値は既に選択された選択ボックスに "オプション"として表示されます。私がする必要があるのは、それらをajax呼び出しから得られるものに設定することです。それらはdbへのクエリから最初に設定されているので一致します。

私はsetValue()を試しましたが、私は正しいことをしているかどうかはわかりません。助けてください！

これは具体的にはselectize jqueryアドオンについての質問です。selectizeはクラス、ID、多くのものを特定のフィールドに変更します。重複として提案されたものと同じ質問ではありません。

-EDIT- 私のスクリプトを変更しました。これまでのところ私はこれまでのことです。

$(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

DOMは$(document).ready()のためのコールバック関数の例（準備ができた後$('#import_search').change(function(){...が起こる。

を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を試してみてください -選択入力が変更お客様の価値を確認するために検索方法に選択リストを変更します。

またはこの例では、技術を実証する必要がありますが、AJAXのrequestionなし：

$(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>

機能が働く