Drop down

SKhna · January 25th, 2008, 05:50 AM

Hello

How can I create a Javascript drop down list File? I want to have a webpage that contain a dropdownlist. But i want the items and values of that drop down lists to be stored in a seperate javascript file, So that my webpage call that JS file whenever user click on the DDList.

Basically what i am interested in is to place all my drop down list Items manually in the javascripting file and then on the main page there will be links from alphabet A-Z so when the user click on alphabet A the dropdown list will only show the containing items start with alphabet A....

Hope this makes sense!! The reason why is because there is a long list of items and i dont want to put them inside my page.

Will be really appreciated if someone reply with code.......

Many Thanks

Regards

Sheraz

joefawcett · January 25th, 2008, 07:46 AM

If I've understood your problem then I would approach it this way. I'd create a variable, in a separate js file if you wish, that looks something like:

Code:

var DDLOptions = {
a: [{value: "option 1 value", text: "option 1 text"},
    {value: "option 2 value", text: "option 2 text"},
    {value: "option 3 value", text: "option 3 text"}],
b: [{value: "option 1 value", text: "option 1 text"},
    {value: "option 2 value", text: "option 2 text"},
    {value: "option 3 value", text: "option 3 text"}],
//....
z: [{value: "option 1 value", text: "option 1 text"},
    {value: "option 2 value", text: "option 2 text"},
    {value: "option 3 value", text: "option 3 text"}]
}

You can the access the options for a particular letter via:

Code:

var oOptions = DDLOptions.a
//or
var oOptions = DDLOptions[a]

which gives an array of option data.

You then iterate through this array and create an option for each element using

Code:

oOptions[i].value and oOptions[i].text

where i represents the index of the current option. These are added to the empty select element that resides on the page.

Alternatively you could do this sort of processing server-side, it depends on how your web application works.

--

Joe (Microsoft MVP - XML)