복제 데이터베이스에서로드하는 동안 선택하십시오.

Question

Selectize.js가있는 선택기가 있으며 여기에서 사용자가 복제 할 수있게하려면 Selectize.js ComboBox: Cloning and Destroying 을 입력하십시오. 또한 원본과 클론이 AJAX로 데이터베이스의 데이터를로드하기를 원합니다.

현재 데이터베이스에서로드 할 수 있으며 선택기를 복제 할 수 있습니다. 하지만 이렇게하면, 새로운 선택기는 선행 선택기에 저장된 값을 지 웁니다.

내 HTML은 이것이다 :

여기

<div id="clone_me_id"> 
    <div class="clone_me_class"> 
     <select class="selector_class"> 
     </select> 
    </div> 
    <button type="button" id='cloner_button'>Add another</button> 
</div> 

그리고 내 스크립트입니다. Selectize.js를 호출하고 PHP를 ejecute 주요 하나는 데이터베이스에서 데이터를 얻을 수 있습니다 :

<script> 
    function selectizeme(){ 
    $('.selector_class').selectize({ 
     valueField: 'id', 
     labelField: 'name', 
     searchField: 'name', 
     options: [], 
     persist: false, 
     maxItems: 2, 
     create: true, 
     sortField: 'text', 
     createOnBlur: true, 
     sortField: 'text', 
     load: function(query, callback) { 
      if(!query.length>2) return callback(); 
      $.ajax({ 
       url: 'ajax.php', //relative url to the php script that loads the data and send it in JSON format 
       type: 'POST', 
       dataType: 'json', 
       data: { 
        name: query, 
       }, 
       success: function(res) { 
        callback(res); 
       }, 
       error: function(data) { 
        alert('error'); 
       } 
      }); 
     } 
    }); 
} 
</script> 

그리고 선택을 복제 스크립트

<script> 
    // When cloner_button button is clicked 
    $('#cloner_button').on('click',function(){ 
     $('.selector_class').each(function(){ // do this for every select with the 'selector_class' class 
     if ($(this)[0].selectize) { // requires [0] to select the proper object 
      var value = $(this).val(); // store the current value of the select/input 
      $(this)[0].selectize.destroy(); // destroys selectize() 
      $(this).val(value); // set back the value of the select/input 
     } 
    }); 
    $('#clone_me_id .clone_me_class:first') 
    .clone() // copy 
    .insertAfter('#clone_me_id .clone_me_class:last'); // where 
    selectizeme(); // reinitialize selectize on all .selector_class 
}); 
$(function(){ // same as $(document).ready() 
    selectizeme(); // selectize all .selector_class 
}); 
</script> 

그리고 이것은에 쿼리에 대한 내 PHP입니다 데이터베이스 내가 이전 선택기의 값을 삭제하는 클론 업체를 피할 수있는 방법을

<?php 
$search = $_POST['name']; 
$connection = new mysqli('localhost','***','***','***'); 
$sql = "SELECT a.id AS id, a.name AS name 
FROM user a 
WHERE name LIKE '%$search%'"; 
$result = mysqli_query($connection, $sql) or die("Error " .mysqli_error($connection)); 
$rows = array(); 
while ($row = mysqli_fetch_assoc($result)) 
{ 
    extract($row); 
    $rows[] = "{ \"id\": \"$id\",\"name\": \"$name\"}"; 
} 
header('Content-Type: text/javascript; charset=UTF-8'); 
echo "[\n" .join(",\n", $rows) ."\n]"; 
?> 

누구나가 알고있는 (문제는 여기에 없다)? 어떤 도움을 환영합니다!

N.

---

편집 :이 같은 선택기 클론 스크립트에

var select = $(this)[0].childNodes[0]; // store the childNodes (options) of the select 
var clone = select.cloneNode(true); // clone the stored options 
$(this)[0].appendChild(clone); // append the cloned options to the new select 

:

좋아, 나는 해결책이 줄을 추가 끝났다

<script> 
    // When cloner_button button is clicked 
    $('#cloner_button').on('click',function(){ 
     $('.selector_class').each(function(){ // do this for every select with the 'selector_class' class 
     if ($(this)[0].selectize) { // requires [0] to select the proper object 
      var value = $(this).val(); // store the current value of the select/input 
      var select = $(this)[0].childNodes[0]; // store the childNodes (options) of the select 
      var clone = select.cloneNode(true); // clone the stored options 
      $(this)[0].selectize.destroy(); // destroys selectize() 
      $(this)[0].appendChild(clone); // append the cloned options to the new select 
      $(this).val(value); // set back the value of the select/input 
     } 
    }); 
</script> 

T 그의 선택기는 다중 선택기에서 작동하지 않으며 새 선택기의 마지막 선택기 값을 반복합니다. 그러나 그것은 시작입니다! 스 니펫 (다른 사람과 함께 재생할 수) 만들기

N.

Answer 1

는 먼 길을 간다. OPTIONS가있는 내 사이트의 예와 달리 select에는 아무 것도 없습니다. 코드 샘플은 기존 옵션을 기반으로합니다. 귀하의 경우에는 아무 것도 없기 때문에 원래의 SELECT에는 selectize가 삭제되면 설정할 옵션이 없습니다. 자바 스크립트를 추가해야합니다 :

var value = $(this).val(); // store the current value of the select/input 
$(this)[0].selectize.destroy(); // destroys selectize() 
// CREATE the OPTION 
$(this).val(value); // set back the value of the select/input 

그건 내 추측입니다.