php - Updating one drop down menu according to option selected in another drop down menu from database -
edited after suggestions (still unresolved):
i have 2 drop down menu's, 1 called country, , other called city. when user chooses country country drop down menu (hereafter drop down menu referred ddm brevity), want city ddm show cities in particular country.
i have relation (called location) in database of following simple form (with entries):
id country city 1 india new delhi 2 india hyderabad 3 usa san diego 4 usa palo alto this code wrote :
<html> <head> <title>admin page</title> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".country").change(function() { var country=$(this).val(); var datastring = 'country='+ country; alert(datastring); $.ajax ({ type: "post", url: "getcity.php", data: datastring, datatype : html, cache: false, success: function(data, textstatus) { alert(textstatus); $(".city").html(data); } }); }); }); </script> <body> <br /> <legend><h2>welcome admin!</h2></legend> <?php include('db.php'); $sql="select distinct country location"; $result=mysqli_query($con, $sql); if (!$result) { echo "db error, not list tables\n"; echo 'mysql error: ' . mysql_error(); exit; } echo '<h4>location :</h4>'; echo '<select name="loaction" class="location">'; echo '<option value="foo">'.'choose country'.'</option>'; while ($row=mysqli_fetch_array($result)) { echo '<option value='.$row[country].'>'.$row[country].'</option>'; } echo '</select>'; ?> <h4><label>city :</label> </h4> <select name = 'city' class = 'city'> <option value = 'foo' > choose city </option> </select> i hope have taken trouble scroll down , see above code. file getcity.php follows :
<?php include('db.php'); if($_post['country']) { $country=$_post['country']; $sql=mysql_query("select id, city location country='$country'"); while($row=mysql_fetch_array($sql)) { $id=$row['id']; $city=$row['city']; echo '<option value="'.$id.'">'.$city.'</option>'; } } however, cannot see in city ddm after status returned ajax call (seen through alert()) 'success'.
what missing?
thanks again.
here's how i'm doing it:
you need 2 selectors:
<select name="state" class="stateselector" ></select> <select name="city" class="cityselector" ></select> and jquery ajax (get) call, fire every time selector of stateselector class changes:
$('.stateselector').change(function(){ $.getjson("http://site.com/getcities/"+$(this).val()+"/all",{}, function(j){ var options = '<option value="0">- city -</option>'; (var = 0; < j.length; i++) { options += '<option value="' + j[i].id + '">' + j[i].name + '</option>'; } $('.cityselector').html(options); $('.cityselector').prop("selectedindex", 0); }); }); at server side, need call url (http://site.com/getcities/{stateid}) receive state id , return json collection cities particular state, in example json structure has id (j[i].id) , name (j[i].name).
Comments
Post a Comment