Hi all, I have created a pair of chained selectboxes in my page. The second selectbox is filled with a set of values, depending on the first box's selected value.

The script that makes the two selectboxes work like this, uses php and javascript. This is the code I'm using:

form

<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 code

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

function getXMLHTTP() { //fuction 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 code (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>
<? } ?>

What I want to do is to apply jquery selectbox styling on these selectboxes. I haven't succeeded in doing that yet. The problem is that jquery is hiding the normal selectbox and is replacing it with a list. Furthermore, after selectbox's content is refreshed, jquery cannot re-construct it into a list. You can take a look of the jquery code here

Is there something I can do to combine these techniques? I have tried a million things but nothing worked. Can you please help me?