If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Aug 2017
    Member #

    Conditional / relational Dropdowns / How to?

    I’m working on a web interface for a fleet maintenance portal. What I need to do is start with a dropdown form element for the “Make” i.e. Ford, Dodge, Toyota, etc… Then I need a second dropdown for “Model such as “Taurus, Ram, Corolla, etc… The Model dropdown needs to be “Make” specific. In other words available models need to be specific to the selected Make. So if the user selects Ford from the Make dropdown; the Model dropdown only offers a list of Ford models. And if the user selects Toyota from the Make dropdown then the Model dropdown only offers a selection of Toyota models.

    At this point I’m fishing for ideas on how to approach this. I’m kind of thinking maybe I could start with a couple of SQL tables i.e. make and model. Setup relational databases …
    Other thoughts are running along the lines of maybe a javascript approach to this.

    So the way this would work is the user would select the “Make” from the first dropdown i.e. Ford, or Toyota, or whatever. Then then the second dropdown “Model” would offer models specific to the Make selected in the first dropdown.

    When all is said and done I need a page where the user can define a vehicle; Make/Model/Year and insert it to a DB stored on their user account.

    Does anyone have any experience or ideas on this kind of setup?


  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Oklahoma City
    Member #
    959 times
    There are a plethora of ways to go about this. The most common way, and the way that provides the best user experience, is to fill the first list with makes, then when the user selects one, use AJAX to query for the models.

    This can be spoofed by loading all of the makes and models in JSON, then simply filling the models section based on the selection. This will make for a longer initial page load, but will pay dividends when you don't have to deal with sending an AJAX request every time something changes. As long as you don't include images, it really shouldn't be too bad, since it would all just be text in JSON format.

    So, for instance:
    'cars' : [
        { 'make' : 'Ford',
            'models' : [ 'Mustang', 'Escort', 'F150' ]
        { 'make' : 'Chevrolet',
            'models' : [ 'Corvette', 'Camaro', 'Trailblazer' ]
    So then, you'll loop through, taking the make from each for the first dropdown, setting the index as the value for the select. When someone selects a make, you'll use that index value to select the object, then loop through the array of models to create the second dropdown.

    You could save this JSON in a separate file so it's easy to add to/edit later. This can also be done using a database to store the make/model info.

    Edmunds has a make/model you can use as well: Vehicle API
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 05:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: