Apply jquery selectbox style on selectbox chain
I've created a couple of whole sets of elements on my page. The second selectbox is filled with a set of values, depending on the first selected field.
The script that makes two selectboxes this way uses PHP and JavaScript. This is the code I am using:
the 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 apply jQuery selectbox styling on these selectboxes. I haven't succeeded yet. The problem is jQuery hides the normal selectbox and replaces it with a list box. Also, after the jquery selectbox content is updated, it is not possible to rebuild it into a list. You can see the jQuery code here
Is there something I can do to combine these methods? I've tried a million things, but nothing worked. Can you help me?
a source to share
at the end of your ajax call, you need to reassign the selectbox () call. The problem you are facing is that the DOM elements that you customize on page load go away towards the end of your ajax call, are replaced with a new select box. If you are using the $ .ajax or $ .get methods in jQuery, they give you the ability to do a completion callback. I would use this.
$(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.
a source to share
you are using jQuery, right ?!
So let's do this jQuery way ....
the 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>
<? } ?>
a source to share