How do you set the default value of a drop down list that is being called via AJAX from another page?

Question

For my code, my drop down lists are initiated on the original page, via

<select name =country id=country 
onchange=showRecords(this.value,'country','province')>"

This function is taking the value, equating it to country, then querying MySQL, and setting the results where id=province, and creating cascading dropdown lists. This is obviously via Ajax.

So, when $_REQUEST['province'] is set, then the Province dropdown list gets populated with all provinces from the country to which it belongs, etc.; ie;

<?if(isset($province)){
echo "<script>showRecords('".$country."','country','province');</script>";}?>

However, for the life of me, I cannot figure out how I can set the default value equal to $_REQUEST['province']. I cannot use the traditional way:

if (($selected) == ($value)) {
 $options.= " selected";
 }

Because it is querying the AJAX page with one piece of information at a time.

Any ideas would be greatly appreciated.

Answer 1

Your code doesn't seem to make a lot of sense. The particular thing that worries me is that you say ajax is loading one item at a time?

Perhaps something like this. A country select tag like...

<select onchange="showRecords(this)">

As well as creating the javascript function showRecords() which will be called when someone chooses an option in the select tag.

<script>
function showRecords(calling_element) {
    // do AJAX call here using calling_element.options[calling_element.selectedIndex].value as the selected country. this.value does not work for select tags.

}
</script>

the PHP page that receives this AJAXed request would reply with a JSON object containing all of the province values, or a delimited list.

once the Javascript showRecords function receives the responce from the PHP page, it would add each of these options to the correct select tag. Once finished, it would set the default value to whichever option it wants by something like the following:

target_element.selectedIndex = {desired list index here};

Answer 2

I have a lot of assumptions to your questions,

first is, if bydefault you have the select province like this

<select id="province">
 <option value=""></option>
 <option value="California">California</option>
 <option value="Washington">Washingthon</option>
</select>

then you can use this script to default select

document.getElementById("province").value="Washington"; 

---

but if bydefault you have the select province like this

<select id="province"></select>

then you can use this script to default select

document.getElementById("province").innerHTML='<option value="Wahsington">Washington</option>'; 

so it depend on your code and your need. maybe if you have another case the problem should be solved in another way.

cmmiiw :)