Question

I am trying to populate a drop down list when a specific list item is chosen in another drop down using jquery, but for some reason the options are being created outside of the drop down list, here is my code,

function makeModel(obj){ 
    model = new Array();
    model[0] = new Array( '212', 'Ace', 'Aceca', 'Cobra', 'Superblower');
    model[1] = 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[2] = new Array( 'Rocsta');

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

    $('#replace').html("<select name=\"test\" id=\"test\">");
    for (x in model[curSel])
    {
        $('#replace').append("<option>" + model[curSel][x] + "</option>");
    }
    $('#replace').append("</select>");  

}  

The HTML:

<form>
<fieldset>       
    <p>
      <label for="test">Make: </label>
      <select name="test" id="test" onchange="makeModel(this);">
        <option>Select one</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </p>
</fieldset>
</form>

<div id="replace"></div>

I’m sure it’s a logical error somewhere on my part, but I can’t find it!

So any help would be appreciated, thanx!

Answer 1

You are appending to the replace div box, not to the select input element.

Change what you are appending to (instead of #replace, you would be using #test) however the ID of #test is being used for BOTH the select being inserted into the replace area and the primary select input used to perform the insert. So you need to change that to something like “sub” and you end up with something like this:

function makeModel(obj){
    model = new Array();
    model[0] = new Array( '212', 'Ace', 'Aceca', 'Cobra', 'Superblower');
    model[1] = 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[2] = new Array( 'Rocsta');

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

    $('#replace').html("<select name=\"test\" id=\"sub\">");
    for (x in model[curSel])
    {
        $('#sub').append("<option>" + model[curSel][x] + "</option>");
    }   

}  

That will do the trick. See here.