I have a webpage that has 3 drop down fields.
Country
State
City
I need to apply filtered look-up for State (based on country) and city (based on state).
I want to achieve using Javascript or Jquery.
PS : The website is not based on any Microsoft technologies or PHP.
Update: I have tried various examples listed below but I am not getting closer to filtered lookup.
a) http://forum.jquery.com/topic/set-dropdown-list-selected-value-after-dynamically-populating
b) http://www.mkyong.com/jquery/how-to-set-a-dropdown-box-value-in-jquery/
c) How do you select a particular option in a SELECT element in jQuery?
Update2
<form method="post">States:
<select name="Select1">
<option>NJ</option>
<option>NY</option>
<option>PA</option>
<option>TX</option>
</select>
<form method="post">City List:
<select name="Select2">
<option>Trenton</option>
<option>Albany</option>
<option>Philly</option>
<option>Newark</option>
<option>NYC</option>
<option>Pittsburgh</option>
<option>Hackensack</option>
<option>Niagara</option>
<option>Harrisburg</option>
</select>
$(function () { var $States = $('select[name=Select1]'); var $Cities = $('select[name=Select2]');
var $citiesList = $Cities.find('option').clone();
var workerandFruits = {
NJ: ["Trenton", "Newark", "Hackensack"],
NY: ["Albany", "NYC", "Niagara"],
PA: ["Philly", "Pittsburgh", "Harrisburg"]
}
$States.change(function () {
var $selectedWorker = $(this).find('option:selected').text();
$Cities.html($citiesList.filter(function () {
return $.inArray($(this).text(), workerandFruits[$selectedWorker]) >= 0;
}));
});
});
Ok, let's start with this:
$(function () {
var citiesByState = {
NJ: ["Trenton", "Newark", "Hackensack"],
NY: ["Albany", "NYC", "Niagara"],
PA: ["Philly", "Pittsburgh", "Harrisburg"]
}
$('select[name=state]').change(function () {
var cities = citiesByState[$(this).val()];
var opts = $.map(cities, function(name) {
return "<option>" + name + "</option>";
});
$('select[name=city]').html(opts.join(""));
});
});
Let us know if you have questions.