Hi there,
I have a Country/City list in my SQL database and access it with PHP using a select element in php. I use the Chosen Jquery Plugin for the styling of these select elements.
Now my problem is that i want only the cities of the country selected to display, and i got that right, but then when it loads the city list, it discards the Chosen Style to the select element.
To load my City Select data i use the onChange event. here is the code:
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 getCity(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('citydiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
that is the Javascript i use to load the file combined with this:
<select name="country" id="country" data-placeholder="Choose a Country..." class="chzn-select-deselect" onChange="getCity('findcity.php?country='+this.value)">
So when the findcity.php is loaded with the new select element
it loses the class that was originally added.
How can i prevent this?