How do you do a dynamic dropdown with make, model, year with javascript?
<p>I need to create a make, model, and year dropdown for an auto parts site and I want the final output of the program to link to a newly created url with the inputs from the dropdowns. I have two of the dropdowns working, but I need to add a third dropdown that displays the years. </p>

<p>Also, the buildUrl function creates an alert that builds a url that will reach pages within our site. They look something like this:</p>

<p><a href="http://www.darspoilers.com/search?q=" rel="nofollow">http://www.darspoilers.com/search?q=</a><strong>acura</strong>%20<strong>tlx</strong>%20<strong>2015</strong></p>

<p>I need that function to link to a url that inputs the make, model, and year that were selected (ie the bold parts of the url). </p>

<p><em>Here's my code so far and it is about half way working:</em></p>

<pre><code>            &lt;!DOCTYPE html&gt;
            &lt;html&gt;
            &lt;head&gt;
            &lt;script&gt;
            function populate(s1,s2){
                var s1 = document.getElementById(s1);
                var s2 = document.getElementById(s2);
                s2.innerHTML = "";
                if(s1.value == "Acura"){
                    var optionArray = ["|","ilx|ILX","integra|Integra","integra type r|Integra Type R","rl|RL","rsx|RSX","tlx|TLX","tl|TL","tsx|TSX"];
                } else if(s1.value == "Audi"){
                    var optionArray = ["|","a4|A4","a6|A6"];
                } else if(s1.value == "BMW"){
                    var optionArray = ["|","3 series 2dr|3 Series 2DR","3 series 4dr|3 Series 4DR","318ti|318TI","5 series|5 Series","z4|Z4"];
                } else if(s1.value == "Buick"){
                    var optionArray = ["|","century|Century","lacrosse|Lacrosse", "lucerne|Lucerne","regal|Regal"];
                } else if(s1.value == "Cadillac"){
                    var optionArray = ["|","ats 4dr|ATS 4DR","cts 2dr|CTS 2DR","cts 4dr|CTS 4DR","catera|Catera","escalade|Escalade","deville|Deville","el dorado|El Dorado","escalade esv|Escalade ESV","seville sts|Seville STS"];
                } else if(s1.value == "Chevrolet"){
                    var optionArray = ["|","aveo 4dr|Aveo 4DR","aveo 5dr|Aveo 5DR","beretta|Beretta","silverado|Silverado","c1500|C1500","camaro|Camaro","cavalier z24|Cavalier Z24","cobalt 2dr|Cobalt 2DR","cobalt 4dr|Cobalt 4DR","corvette c5|Corvette C5","corvette c6|Corvette C6","corvette c7|Corvette C7","cruze|Cruze","hhr|HHR","impala|Impala","malibu|Malibu","prizm|Prizm","ssr|SSR","suburban/tahoe|Suburban/Tahoe","trailblazer|Trailblazer"];
                } else if(s1.value == "Chrysler"){
                    var optionArray = ["|","200|200","300|300","300m|300M","aspen|Aspen","concorde|Concorde","pt cruiser|PT Cruiser","sebring|Sebring","town &amp; country|Town &amp; Country"];
                }
                for(var option in optionArray){
                    var pair = optionArray[option].split("|");
                    var newOption = document.createElement("option");
                    newOption.value = pair[0];
                    newOption.innerHTML = pair[1];
                    s2.options.add(newOption);
                }

             }

            function buildUrl(url, parameters){
              var qs = "";
              for(var key in parameters) {
                var value = parameters[key];
                qs += encodeURIComponent(value) + "%20";
              }
              if (qs.length &gt; 0){
                qs = qs.substring(0, qs.length-3 ); //chop off last "&amp;"
                url = url + "search?q=" + qs;
              }
              return url;
            }

            //example:
            var url = "http://www.darspoilers.com/";
            var parameters = new Array();
            parameters[0] = "acura";
            parameters[1] = "tsx";



            &lt;/script&gt;
            &lt;/head&gt;
            &lt;body&gt;
            &lt;h2&gt;Choose Your Car&lt;/h2&gt;
            &lt;hr /&gt;
            Choose Car Make:
            &lt;select id="slct1" name="slct1" onchange="populate(this.id,'slct2')"&gt;
              &lt;option value=""&gt;&lt;/option&gt;
              &lt;option value="Acura"&gt;Acura&lt;/option&gt;
              &lt;option value="Audi"&gt;Audi&lt;/option&gt;
              &lt;option value="BMW"&gt;BMW&lt;/option&gt;
              &lt;option value="Buick"&gt;Buick&lt;/option&gt;
              &lt;option value="Cadillac"&gt;Cadillac&lt;/option&gt;
              &lt;option value="Chevrolet"&gt;Chevrolet&lt;/option&gt;
              &lt;option value="Chrysler"&gt;Chrysler&lt;/option&gt;
            &lt;/select&gt;
            &lt;hr /&gt;
            Choose Car Model:
            &lt;select id="slct2" name="slct2" onchange="alert(buildUrl(url,parameters))"&gt;&lt;/select&gt;
            &lt;hr /&gt;
            &lt;/body&gt;
            &lt;/html&gt;
</code></pre>

<p>Any feedback or ideas would be greatly appreciated. </p>

<p>Thanks,
Jordan</p>