Question

ok so I am trying to dynamically create a select list using javascript, basically when someone clicks on a car make, the model select drop down needs to populate with the specific make’s models, this is what I have thus far, it’s very amateur, so please excuse me.

Here is my attempt at Javascript:

function makeModel(obj){ 
 model = new Array();
 model[0] = new Array( 'ANY' );
 model[1] = new Array( '212', 'Ace', 'Aceca', 'Cobra', 'Superblower');
 model[2] = new Array( '145', '146', '147', '147 3 Door', '147 5 Door', '155', '156', '159', '164', '166', '33', '75', '90', 'Alfasud', 'Alfetta', 'Arna', 'Brera', 'GT', 'GTV', 'Giulietta', 'Gold Cloverleaf', 'Mito', 'SZ', 'Spider', 'Sprint');
 model[3] = new Array( 'Rocsta');
 model[4] = new Array( 'DB7', 'DB9', 'DBS', 'Lagonda', 'V8', 'V8 Vantage', 'V8 Vantage Roadster', 'Vanquish', 'Vantage', 'Virage', 'Volante');
 model[5] = new Array( '100', '200', '400', '500', '80', '90', 'A2', 'A3', 'A4', 'A4 Avant', 'A4 Cabriolet', 'A4 Sedan', 'A5', 'A6', 'A8', 'Allroad', 'Cabriolet', 'Convertible', 'Coupe', 'Q5', 'Q7', 'Quattro', 'R8', 'RS2 Avant', 'RS4 Avant', 'RS4 Quattro', 'RS6', 'S2', 'S3', 'S4', 'S5', 'S6', 'S8', 'TT', 'Turbo');
 model[6] = new Array( 'Allegro', 'Ambassador', 'Healey', 'Maestro', 'Maxi', 'Metro', 'Mini', 'Montego', 'Princess');
 model[7] = new Array( '1 Series', '1 Series 3 Door', '1 Series 5 Door', '1 Series Convertible', '1 Series Coupe', '3 Series', '3 Series Compact', '3 Series Convertible', '3 Series Coupe', '3 Series E46 2000-2005', '3 Series Sedan', '3 Series Touring', '5 Series', '5 Series GT', '6 Series', '7 Series', '8 Series', 'M Coupe', 'M1', 'M3', 'M5', 'M6', 'X1', 'X3', 'X5', 'X6', 'Z1', 'Z3', 'Z4', 'Z8');
 model[8] = new Array( 'Valiant');
 model[9] = new Array( 'Buggy');
 model[10] = new Array( 'Arnage', 'Azure', 'Brooklands', 'Continental', 'Corniche', 'Eight', 'Mulsanne', 'Series II', 'Turbo R', 'Turbo RT');

 var curSel=obj.options[obj.selectedIndex].value ;
 var x;

 document.write("<select name=\"test\" id=\"test\">");
 for (x in model[curSel])
 {
 document.write("<option>" + mycars[curSel][x] + "</option>");
 }
 document.write("</select>");


}

Here is the HTML:

<p>
  <label for="make">Make: </label>
  <select name="make" id="make" onchange="makeModel(this);">
    <option>Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</p>

The problem I have is that when I select an option in the make list, the page goes blank and it keeps loading something, and all I see is a small little drop down dox with nothing in it.

Now I am assuming that I need to target a specific element and generate the select list inside of that one?

Thanx in advance!

Answer 1

there are numerous ways to go about this:

• have an empty DIV and target its innerHTML property
• have a select element under the 'make' select, with style property display set to none. on select of make you can dynamically populate this hidden select using new Option(val, text) and reset its display property to block