Dynamic dropdown

I am using Bootstrap and ASP with MS SQL.

I am looking for a tutorial to create a dynamic drop down menu. So that when I make a selection on drop down # 1 then drop down # 2 populates with the correct data.

I already have my recordsets ready (using Dreamweaver), the parent with the parent id and the child with the child id and the parent id so I can filter it out.

Trying to find but no luck so far.
LVL 1
AleksAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can certainly create this on your own, but using the client side jquery chained makes this easy.  http://www.appelsiini.net/projects/chained

Since you are using bootstrap, you really only need to add the chained js to your page.   Below is the code from their sample.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>
</head>
<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

Open in new window


Note that the 2nd drop down contains all possible selects. The jquery from chained will filter the 2nd drop down where the value of the first select equals the class in the 2nd.

Therefor, you will need 2 recordsets.  The first to generate the main drop down will contain just the main options.  The 2nd recordset will need to contain all the options.  This probably means you will need an sql query that is joined one table to another, then grouped by the main item, then the secondary item.  It sounds like you already have that part under control.

As far as bootstrap goes, it is your front end responsive grid and using classes in this manner should not affect what you are currently doing. If you have a class already attached to your select, just add the needed class to link to the main drop down.  As long as you are not using that class name in your css, there will be no visual changes.

You can have a go at making your own js/jquery to do the same thing, but why reinvent the wheel.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AleksAuthor Commented:
Perfect !  This is what I needed. Thanks so much !
AleksAuthor Commented:
Thx !
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.