Question

I am creating a form where the users will have to select the country from the drop down list. as soon as they selects it should activate another drop down list where it should show the states belonging to the country and hence it should process the value from country Id of element. and as soon as the user selects the states another drop down list should activate listing the cities belonging to that particular states, and hence so on to areas.

for that i have written the php and html code like this.

Select Countries : <select name="countries"><br/>
<?php
foreach($property->getAllCountries() as $countries) 
{ 
?>
    <option value="<?php echo $countries['id']; ?>"><?php echo $countries['name']; ?></option>
<? } ?>
</select><br/>
Select State : <select name="state">
<?php
foreach($property->getStatesFromCountryId($countryId) as $states) 
{ 
?>
    <option value="<?php echo $states['id']; ?>"><?php echo $states['name']; ?></option>
<? } ?>
</select>

the javascript should automatically insert $countryId from and populate the states after the user selects it.

i am noob at javascript i would appreciate if someone could guide me how to achieve this?

thank you.

Answer 1

sorry for bad english.
you should add onchange=”showstates()” to select countries and a div to add states of country to it

function showstates()
{
var country=document.getElemtById("countries").value;
if (country=="anywhere")
{
document.getElemtById("statesofcountries").innerHTML='<div>"states list"</div>';
}
}

check this link