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隐藏了正常的选择框，并用列表替换它。此外，在刷新selectbox的内容后，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(); }});
    })
})

编辑：这有效。

在链接的选择框中应用jquery选择框样式

2 个答案: