two dropdown box one is parent one is child
Moderator: General Moderators
two dropdown box one is parent one is child
I wand two drop down box , parent one is state , the child one is city , when state get select the relate city get display. how to do it 
Re: two dropdown box one is parent one is child
Attach a listener to the state dropdown, get its value, fire an AJAX request to get a list of cities for the state in question, create the second list from the results.
Re: two dropdown box one is parent one is child
I have the following now
Code: Select all
:?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</script>
<script>
$(document).ready(function(){
$('#bonus').change(function() {
alert($("#bonus option:selected").text());
});
});
</script>
</head>
<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>Re: two dropdown box one is parent one is child
Looks like you've got the right idea. Now you just need to replace the alert with an AJAX call to get the data for the second dropdown.
Re: two dropdown box one is parent one is child
I have the following code, but is not work
Code: Select all
if(country != '')
{
$.ajax
({
type: "POST",
url: "test/useraccount.php",
data: "p="+ country,
success: function(option)
{
$("#institution").html(option);
}
});
}
else
{
$("#institution").html("<option value=''>-- No category selected --</option>");
}
<div>
<table width="100%">
<tr>
<td class="programTitleLeft">Create account</td>
<td class="programTitleRight">hello </td>
</tr>
</table>
<table align=center width=50% border=0 cellpadding=2 cellspacing=0>
<tr><td><b>E-mail address : <b></td>
<td><input type=text name="email" value="" size=40 maxlength=40>
</tr>
<tr><td><b>Country:</b></td>
<td><select id="country" >
<option>---</option>
</select>
</td>
</tr>
<tr><td><b>Institution:</b></td>
<td><select id="institution">
<option >----</option>
</select></td>
</tr>
<tr><td><b>Counselor’s Name : <b></td>
<td><input type=text name="name" value="" size=40 maxlength=40>
</tr>
</table>
</form>
</div>