Apply jquery selectbox style on chained selectbox
- by ktsixit
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?
