세 번째 드롭 다운에 쿼리 결과 채우기

Question

세 개의 드롭 다운이 있습니다. 첫 번째 드롭 다운에서 선택한 옵션에 따라 자바 스크립트를 사용하여 두 번째 드롭 다운을 채우고 있습니다.

첫 번째 드롭 다운

<select id="continent" onchange="secondMenu(this,'country')" > 
<option value="1">Asia</option> 
<option value="2">Europe</option 
</select> 

두 번째 드롭 다운

<select id="country" > 
</select> 

세 번째 드롭 다운

<select id="population" > 
</select> 

내 스크립트

<script> 
     function secondMenu(ddl1,ddl2){ 
    var as=new Array('Japan','China'); 
    var eu=new Array('Germany','France'); 
switch (ddl1.value) { 
     case 1: 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < as.length; i++) { 
       createOption(document.getElementById(ddl2), as[i], as[i]); 
      } 
      break; 
     case 2: 
      document.getElementById(ddl2).options.length = 0; 
     for (i = 0; i < eu.length; i++) { 
      createOption(document.getElementById(ddl2), eu[i], eu[i]); 
      } 
      break; 

    } 
    function createOption(ddl, text, value) { 
    var opt = document.createElement('option'); 
    opt.value = value; 
    opt.text = text; 
    ddl.options.add(opt); 
    } 
</script> 

이제 두 번째 드롭 다운에서 선택한 옵션을 기반으로 mysql 쿼리를 실행하고 세 번째 드롭 다운을 채우고 싶습니다. 세 번째 드롭 다운을 채우는 방법에 대한 도움.

$('#product_series_text', $('#product_form')).change(function() { 
    var $series = $(this).val(); 
    // Ajax request to get an updated list of product models 
    $.getJSON(
    "<?php echo url::site('product/get_model_like_series'); ?>", 
    { series: $series }, 
    function(data) { 
     $("#product_model", 
     $('#product_form')).form_utils('replaceOptions', data); 
    }); 
}); 

가 jQuery를 많이 Theres는하지만, 생각은 하나의 변화에 ​​대한의 EventListener을하는 것입니다 :

Answer 1

AJAX를 사용하십시오. 귀하의 서버에 요청을 보내고 mysql 쿼리를 실행하십시오. 당신이 jQuery를 사용하지 않는 가정, 순수한 AJAX는 다음과 같이 보입니다 :

if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      var data = xmlhttp.responseText; 
      //populating your select 
     } 
     } 
     xmlhttp.open("GET", "yourmethodpath", true); 
     xmlhttp.send(); 
    } 

Answer 2

사용 아약스, 나는 그렇게를 heres 예를 들어, 내 프로젝트 중 하나에서 매우 비슷한 할 (데이터베이스를 폴링하여 결과의 ​​Json 목록을 전송하는) Ajax 쿼리를 실행 한 다음 드롭 다운 목록을 작성합니다 (드롭 다운 목록이 이미 있으므로 옵션 만 변경됩니다).