Apply jquery selectbox style on chained selectbox

Question

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() { //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 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?

Answer 1

at the end of your ajax call you need to reassign the selectbox() call. The problem you are experiencing is that DOM elements you setup on page load are gone by the end of your ajax call, replaced with a new select box. If you use the $.ajax or $.get methods in jQuery they give you the option of a completion callback. I would use that.

$(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(); }});
    })
})

Edit: This works.

Answer 2

you are using jQuery, right?!

So, lets do this jQuery way....

form

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

<? } ?>