p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   Javascript (http://p2p.wrox.com/forumdisplay.php?f=85)
-   -   Drop down (http://p2p.wrox.com/showthread.php?t=65498)

SKhna January 25th, 2008 05:50 AM

Drop down
 
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)


All times are GMT -4. The time now is 06:08 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.