체인 된 선택 상자에 jquery 선택 상자 스타일 적용

Question

내 페이지에 체인 된 선택 상자 쌍을 만들었습니다. 두 번째 선택 상자는 첫 번째 상자의 선택한 값에 따라 값 집합으로 채워집니다.

두 개의 선택 상자를 이렇게 만드는 스크립트는 PHP와 JavaScript를 사용합니다. 이것은 내가 사용하고 코드입니다 :

형태

<select name="continent" tabindex="1" onChange="getCountry(this.value)">  
    <option value="#">-Select-</option> 
    <option value="Europe">Europe</option> 
    <option value="Asia">Asia</option> 
</select> 

<div id="countrydiv"> 
    <select name="country" tabindex="2"> 
     <option></option> 
    </select> 
</div> 

<input type="submit" /> 

</form> 

자바 스크립트 코드

$(document).ready(function() { 
    $('select[name="continent"]').selectbox({debug: true}); 
    $('select[name="country"]').selectbox({debug: true}); 
}); 

function getXMLHTTP() { //function to return the xml http object 
     var xmlhttp=false; 
     try{ 
      xmlhttp=new XMLHttpRequest(); 
     } 
     catch(e) {  
      try{    
       xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch(e){ 
       try{ 
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
       } 
       catch(e1){ 
        xmlhttp=false; 
       } 
      } 
     } 
     return xmlhttp; 
    } 

function getCountry(continentId) {   
    var strURL="findCountry.php?continent="+continentId; 
    var req = getXMLHTTP(); 

    if (req) { 

     req.onreadystatechange = function() { 
      if (req.readyState == 4) { 
       // only if "OK" 
       if (req.status == 200) {       
        document.getElementById('countrydiv').innerHTML=req.responseText;      
       } else { 
        alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
       } 
      }    
     }   
     req.open("GET", strURL, true); 
     req.send(null); 
    }  
} 

PHP 코드 (findCountry.php)

<? 
$continent=intval($_GET['continent']); 
if ($_GET['continent'] == 'Europe') { 
?> 
<select name="country"> 
    <option value="France">France</option> 
    <option value="Germany">Germany</option> 
    <option value="Spain">Spain</option> 
    <option value="Italy">Italy</option> 
</select> 
<? } 
if ($_GET['continent'] == 'Asia') { 
?> 
<select name="country"> 
    <option value="China">China</option> 
    <option value="India">India</option> 
    <option value="Japan">Japan</option> 
</select> 
<? } ?> 

내가하고 싶은 것은 이러한 선택 상자에 jQuery 선택 상자 스타일을 적용하는 것입니다. 나는 아직 그 일에 성공하지 못했다. 문제는 jQuery가 일반적인 선택 상자를 숨기고 목록으로 대체한다는 것입니다. 또한 selectbox의 내용을 새로 고친 후 jquery는이를 목록으로 재구성 할 수 없습니다. 당신은 jQuery 코드를 볼 수 있습니다 here

이러한 기술을 결합하기 위해 할 수있는 일이 있습니까? 나는 백만 가지를 시도했지만 아무 것도 효과가 없었다. 저를 도와주세요?

Answer 1

ajax 호출이 끝나면 selectbox() 호출을 다시해야합니다. 발생한 문제는 ajax 호출이 끝날 때 페이지로드시 설정 한 DOM 요소가 사라지고 새 선택 상자로 바뀌었기 때문입니다. jQuery에서 $ .ajax 또는 $ .get 메소드를 사용하면 완료 콜백 옵션이 제공됩니다. 나는 그것을 사용할 것이다.

$(document).ready(function(){ 
    $('select[name="continent"]').change(function(){ 
     var continentId = this.value; 
     $('select[name="country"]').parent().remove(); 
     $.ajax({url:"findCountry.php?continent="+continentId,success: function(data){ y = $('<select name="country"><select>');z=$('<div id="countrydiv"></div>'); $('input[type="submit"]').before(z.append(y.append(data))); $('select[name="country"]').selectbox(); }}); 
    }) 
}) 

편집 : 이것은 작동합니다.

Answer 2

jQuery, 을 사용하고 계십니까?

그래서,이 jQuery를 방법 ....

형태

<select name="continent" tabindex="1" >  
    <option value="#">-Select-</option> 
    <option value="Europe">Europe</option> 
    <option value="Asia">Asia</option> 
</select> 

<div id="countrydiv"> 
    <select name="country" tabindex="2"> 
     <option></option> 
    </select> 
</div> 

jQuery를

$(document).ready(function(){ 
    $('select[name="continent"]').change(function(){ 
     var continentId = this.value; 
     $('select[name="country"]').load("findCountry.php?continent="+continentId) 
    }) 
}) 

PHP 코드 (findCountry.php)

을 수행 할 수 있습니다

<? 
$continent=intval($_GET['continent']); 
if ($_GET['continent'] == 'Europe') { 
?>  
    <option value="France">France</option> 
    <option value="Germany">Germany</option> 
    <option value="Spain">Spain</option> 
    <option value="Italy">Italy</option> 

<? } 
if ($_GET['continent'] == 'Asia') { 
?>  
    <option value="China">China</option> 
    <option value="India">India</option> 
    <option value="Japan">Japan</option> 

<? } ?>