Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    change options in form based on selection.

    I'd like to try an replicate the new and used car form from cars.com Could anyone point me in the right direction for making a form that will load different <option> depending on the previously selected option. Here is a sample of the json data from cars.com

    Code:
    ddData = {
        "USED": [{
            "name": "Acura",
            "value": "20001",
            "models": [{
                "name": "CL",
                "value": "20773"
            }, {
                "name": "ILX",
                "value": "47843"
            }, {
                "name": "ILX Hybrid",
                "value": "48964"
            }, {
                "name": "Integra",
                "value": "21266"
            }, {
                "name": "Legend",
                "value": "21380"
            }, {
                "name": "MDX",
                "value": "21422"
            }, {
                "name": "NSX",
                "value": "21685"
            }, {
                "name": "RDX",
                "value": "21831"
            }, {
                "name": "RL",
                "value": "21782"
            }, {
                "name": "RSX",
                "value": "21784"
            }, {
                "name": "SLX",
                "value": "21879"
            }, {
                "name": "TL",
                "value": "22237"
            }, {
                "name": "TSX",
                "value": "22248"
            }, {
                "name": "Vigor",
                "value": "22362"
            }, {
                "name": "ZDX",
                "value": "32888"
            }]
        }, {
            "name": "Alfa Romeo",
            "value": "20047",
            "models": [{
                "name": "164",
                "value": "20325"
            }, {
                "name": "8c Competizione",
                "value": "34963"
            }, {
                "name": "Spider",
                "value": "22172"
            }]
        }, {
            "name": "Am General",
            "value": "20002",
            "models": [{
                "name": "Hummer",
                "value": "21235"
            }]
        }, {
            "name": "Aston Martin",
            "value": "20003",
            "models": [{
                "name": "DB AR1 Zagato",
                "value": "46643"
            }, {
                "name": "DB7",
                "value": "20961"
            }, {
                "name": "DB7 Vantage",
                "value": "20955"
            }, {
                "name": "DB9",
                "value": "20967"
            }, {
                "name": "DBS",
                "value": "20957"
            }, {
                "name": "Rapide",
                "value": "37363"
            }, {
                "name": "V12 Vanquish",
                "value": "22247"
            }, {
                "name": "V12 Vantage",
                "value": "40743"
            }, {
                "name": "V8 Vantage",
                "value": "22253"
            }, {
                "name": "V8 Vantage S",
                "value": "47110"
            }, {
                "name": "Vantage",
                "value": "22266"
            }, {
                "name": "Virage",
                "value": "22282"
            }]
        }]
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    These are called Dynamic Dropdowns and google will bring up a number of sites for you. But try these for starters:
    http://javascript.about.com/library/bldydrop1.htm
    And
    http://javascript.about.com/library/bl3drop.htm

  • #3
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts
    Yeah I don't think you will need Ajax, just regular Javascript on this one.

    Just create a conditional that deletes the 2nd pull-down menu and replaces it with a different one based on the selection of the first pull-down menu. I think "onchange" would be the event listener for the original drop-down menu.

    I hope this helps, I don't have to time to go too far into it right now.
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •