Filtered look-up using javascript or jquery

Question

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;
    }));
});

});

Sorry, but it still looks to me like you're waiting for someone to write code for you. — georg, Oct 01 '13 at 15:17
@thg435: I have updated my code in Update2. This is the proof I am trying. I have to pre-define all combinations and have it in my webpage. Since the dropdown value (state and city) vary based on customer login I think I have to pre-generate these values. The above code (as shown in Update2) is in http://jsfiddle.net/chiltu123/d8hY5/ — Anirudh, Oct 01 '13 at 16:06

score 1 · Accepted Answer · answered Oct 01 '13 at 16:16

1

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(""));
    });
});

http://jsfiddle.net/d8hY5/1/

Let us know if you have questions.

answered Oct 01 '13 at 16:16

georg

211,518
52
313
390

@thg435- My problem is the webpage that has 2 dropdowns are called Brands and Models (Here in this example State and City). There are tons of models linked to every brand and for me to define them in the beginning is a pain. So what I am looking to do is get the value of BRAND (using javascript/jquery) and then build the associated models array on the fly at runtime. I can not hardcode the values as these values keep changing. What are my options here? – Anirudh Oct 01 '13 at 16:32
How can your app possibly know which model belongs to which brand? – georg Oct 01 '13 at 16:33
This webpage is from a company that hosts the website in cloud (not office 365) and we can only customize using Javascript / Jquery. So as far as data, I have some routines that I can invoke to get Brand to Model associations. So basically when user selects CANON as brand, I can find out how many models are associated using some queries provided by hosting company. – Anirudh Oct 01 '13 at 16:40
@Anirudh: in the above snippet, replace `var cities = citiesByState[$(this).val()] ` with your dynamic query: `var models = Get-Models-For-Brand( $(this).val())` – georg Oct 01 '13 at 16:47
Thanks for the input. I am trying to follow similar approach such that I can get the values and store them. I will keep you updated at the earliest. – Anirudh Oct 01 '13 at 19:13

Filtered look-up using javascript or jquery

1 Answers1