How do i filter data and populate combobox in javascript

Question

Hi guys,

I am thinking to work on two combos for: country and city.

When user selects country in first combo, its cities should be populate in the city combobox.

For it:
1.) Prepare 2 javascript variables: first one with countries id and name, second one with cities id, name and country_id

For Countries:
[
{"id":1, "title":"uk"},
{"id":3, "title":"US"},
{"id":6, "title":"CANADA"},
{"id":8, "title":"AUSTRALIA"}
]
and For Cities:
[
{"id":1, "country_id":1, "city":"LONDON"},
{"id":3, "country_id":1, "city":"Manchester"},
{"id":4, "country_id":2, "city":"New YORK"},
{"id":5, "country_id":2, "city":"New Jersey"},
{"id":8, "country_id":8, "city":"MELBOURN"}
]

Now:
1.) How do i populate the above country data to country combobox?
2.) How do i populate the related cities data to the city combobox when user selects the country?

Answer 1

See this article at CSS-Tricks.com:

• So You Need To Fill a Dropdown Dynamically

Answer 2

Here are some tutorials for linked comboboxes: * http://www.javascriptkit.com/script/script2/multiplecombo.shtml * http://www.javascriptkit.com/script/cut183.shtml

Answer 3

Try this http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=74

Answer 4

My Man I Love Pure JavaScript

Listen Up i will tell you the whole stuff

first this is a json object right so you need to eval it if its string using eval function

var jsonobject = eval(json string);

then loop through this object to bind into the ddl

so

it wil be like that

for through the array of js object and inside the for bind the ddl

var ddl_countries= document.getElementById('countriesdropdownid') var ddl_country_option = document.createElement('option'); ddl_country_option.innerHTML = text //from the object; ddl_country_option.value = value //from the object; ddl_countries.appendChild(ddl_country_option);

thats binding for cities

on the onchange bind on the cities same way if you intrested for more description iam ready just tell me u intersted and i will write the full code