在链式选择框上应用 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>

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

你正在使用 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>

<? } ?>

Answer 2

在您的 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(); }});
    })
})

编辑：这行得通。