在链式选择框中应用jquery selectbox风格

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> 

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选择框样式。我还没有成功做到这一点。问题在于jQuery隐藏了正常的选择框，并将其替换为一个列表。此外，在选择框的内容被刷新后，jquery不能将其重新构建到列表中。你可以看看jQuery代码here

有什么我可以做的，以结合这些技术？我尝试过一百万件事，但没有成功。你能帮我么？

Answer 1

在您的ajax调用结束时，您需要重新分配selectbox（）调用。您遇到的问题是您在页面加载时设置的DOM元素在您的ajax调用结束时已经消失，取而代之的是新的选择框。如果你在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(); }}); 
    }) 
}) 

编辑：This works。

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> 

<? } ?>