select2 with dependent dynamic dropdown PHP/JQuery

Question

안녕하세요 저는 select2를 사용하여 PHP 내 종속 동적 드롭 다운 목록의 스타일을 지정합니다. 문제는 첫 번째 드롭 다운에서 값을 선택하여 mysql DB에서 두 번째 드롭 다운 목록으로 데이터를 가져 오는 것입니다. 그것은 그것의 기본 스타일로 간다 그래서 여기에 문제를 해결하기 위해 몇 가지 솔루션이 필요 내 파일입니다.
선택 2 스크립트

<script type="text/javascript"> 
      $(document).ready(function() { 
       $(".js-example-basic-single").select2(); 
      }); 
     </script> 

의 index.php`

<form name="form1" action="test.php" method="post"> 
      <table> 
       <tr> 
        <td> 
        <select name="brand" id="branddd" class="js-example-basic-single" required> 
         <option disabled selected required >brand</option> 
         <?php  
         $res=mysqli_query($link,"select * from brand"); 
         while($row=mysqli_fetch_array($res)) 
         { 
         ?> 
         <option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option> 
         <?php 
         } 
         ?> 
        </select> 
        </td> 
       </tr> 
       <tr> 
        <td> 
        <select name="model" id="model" class="js-example-basic-single" required> 
         <option disabled selected required >model</option> 
        </select> 
        </td> 
       </tr> 
       <tr> 
        <td><input type="submit" value="submit"></td> 
       </tr> 
      </table> 
     </form> 

스크립트는 DB 값을 가져올 수 :

이

<script type="text/javascript"> 
      function change_brand() 
      { 

       var xmlhttp=new XMLHttpRequest() ; 
       xmlhttp.open("GET","ajax.php?brand="+document.getElementById("branddd").value,false) ; 
       xmlhttp.send(null) ; 
       document.getElementById("model").innerHTML=xmlhttp.responseText ; 

      } 
      $(function(){ 
       $('#branddd').on('change',function(){ 
        this.value && // if value!="" then call ajax 
         $.get('ajax.php',{brand:this.value},function(response){ 
         $('select[name="model"]').html(response); 
        }); 
       }); 
      }); 
     </script> 

ajax.php가 :

<?php  
      $link=mysqli_connect("localhost","root",""); 
      mysqli_select_db($link,"test_db"); 
      $brand=$_GET["brand"]; 

      if($brand!="") 
      { 
      $res=mysqli_query($link,"select * from model where brand_id=$brand"); 
      echo "<select>"; 
      while($row=mysqli_fetch_array($res)) 
      { 
       echo "<option>"; echo $row["name"]; echo "</option>"; 
      } 
      echo "</select>"; 
      } 
     ?> 

Answer 1

이것은 너의 tyled 선택 요소 : 당신은 당신의 PHP 에코에 name, id 및 class 속성을 추가 할 필요가

<select name="model" id="model" class="js-example-basic-single" required> 

. 이런 식으로 뭔가 :

echo "<select name=\"model\" id=\"model\" class=\"js-example-basic-single\" required>"; 

그러나 훨씬 더 좋은 방법은 새로운 선택 요소를 작성하고 html 기능을 대체하지하는 것입니다. 대신 PHP 페이지의 데이터를 JSON 객체로 출력 한 다음 해당 옵션을 select 요소에 추가하십시오.

JSON 개체 :

{ 
    "option1": "Data A", 
    "option2": "Data B", 
    "option3": "Data C" 
} 

자바 스크립트 :

답변에 대한

function change_brand() { 
    $.ajax({ 
    url: "ajax.php?brand="+document.getElementById("branddd").value, 
    dataType: "json", 
    success: function(data) { 
    var name, select, option; 
    select = document.getElementById('model'); 

    // Clear the old options 
    select.options.length = 0; 

    // Load the new options 
    for (name in data) { 
     if (data.hasOwnProperty(name)) { 
     select.options.add(new Option(data[name], name)); 
     } 
    } 
    } 
    }); 
}