Применить стиль jquery selectbox на цепочке selectbox

Question

На моей странице я создал пару целых селекторных ячеек. Второй selectbox заполняется набором значений, в зависимости от выбранного значения первого окна.

Сценарий, который делает два selectboxes таким образом, использует 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> 

Javascript код

$(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 selectbox на этих избранных блоках. Мне еще этого не удалось. Проблема в том, что jQuery скрывает нормальный selectbox и заменяет его на список. Кроме того, после обновления содержимого selectbox jquery невозможно перестроить его в список. Вы можете взглянуть на код jQuery here

Есть ли что-то, что я могу сделать, чтобы объединить эти приемы? Я попробовал миллион вещей, но ничего не получилось. Не могли бы вы мне помочь?

Answer 1

В конце вашего вызова ajax вам необходимо переназначить вызов selectbox(). Проблема, с которой вы столкнулись, заключается в том, что элементы DOM, которые вы настраиваете при загрузке страницы, уходят к концу вашего вызова ajax, заменяются новым полем выбора. Если вы используете методы $ .ajax или $ .get в jQuery, они дают вам возможность выполнить обратный вызов завершения. Я бы использовал это.

$(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> 

<? } ?>