/    Sign up×
Community /Pin to ProfileBookmark

Creating a varied number of dropdown lists dynamically

Copy linkTweet thisAlerts:
May 03.2014

I’m working on an AJAX based site (which also involves PHP and MySQL) and I’m trying to create a product selection system, where someone can start with a dropdown list of very generic items, and slowly (through additional drop down menus) “narrow” down to the specific item or class of items they are looking for.

My problem is this: I’m not sure how to go about the dynamic portion of it. Should I just create a bunch of drop down lists, and then through Javascript, hide or show them as needed, or should I create them dynamically as I need them? My other issue is that for some items, the lists may be only 2 or 3 levels deep, whereas for others, it may be 4-6 levels deep.

I’m trying to minimize the amount of HTML code, so I can decrease the page size and browser processing time, so any advice would be helpful.

I am quite experienced in Javascript, HTML, PHP and MySQL. Lastly, I DON’T want to use any third-party libraries, such as jQuery–it needs to be hand-coded by me.

to post a comment
Full-stack Developer

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyMay 04.2014 — My suggestion would be to use a lovely JSON-ish object. The way I see this working is you load all of the products (and their information) into a nice JSON object. Next, javascript can dynamically build any dropdowns you need based on any criteria you set. So regardless of the number of levels in any particular dropdown flow, javascript will build them on-the-fly and have a master list of products to filter from.

Now, without some examples to see what 'very generic items' might be, and any subsequent list, it's a little tricky for me to throw some code at you. But you certainly can do this without jQuery (or any other framework/library). And as far as page-size goes, I guess the size of the script itself might slightly increase a page load time, but I can't see it being in any way noticeable (unless you hop on a dial-up connection). Overall though it'll be pretty minimal as the idea is to have javascript generate HTML (dropdowns) on-the-fly and populate with whatever items fit a criteria.
×

Success!

Help @alexdeef spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...