ajax의 결과로 선택된 필드의 값을 설정하는 방법은 무엇입니까?

Question

선택 상자 I selectize에 대한 기본값을 설정하는 방법에 대한 많은 스레드를 보았습니다. 그러나 선택 상자의 값을 아약스 호출에서 다시 가져 오는 값으로 설정하는 방법은 무엇입니까?

내 기능은 다음과 같습니다

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

내가 쉽게

즉 $('#' + key).val(value); 라인, 내 필드의 ID가 데이터베이스에 컬럼 이름과 일치하기 때문에했다.

키가 Customers 인 무언가를 얻었 으면 선택한 고객 선택 상자의 값을 아약스 호출에서 가져온 값으로 설정하는 방법은 무엇입니까?

선택 상자는로드시 선택되며 데이터베이스의 항목에서 올바르게 채워집니다.이 기능은 이전 프로젝트의 설정을 "가져 오기"하고 선택한 프로젝트를 기반으로 사용자의 모든 것을 사전 설정하는 기능입니다.

새 값을 추가하지 않으려는 경우 값이 이미 선택 항목 인 선택 상자에 "옵션"으로 표시됩니다. 필요한 것은 아약스 호출에서 가져온 값으로 설정하는 것입니다. 항상 처음에는 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(){...가 발생하는지 확인합니다.

이 의 setValue를 (호출하는) selectize 제어에, 우리가 인스턴스를 캡처 할 필요가 나타납니다 . 제어의 당 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>

기능이 작동