Problem adding options to a drop down list using jQuery

Question

Hi guys, 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.

Answer 2

$('#replace').append("</select>"); 

Is not necessary. And will in fact create another select element or just error.

In your question you are appending the options to the div, not actually the select. I would fix it up 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;

    var $replace = $('#replace');
    var $sel = $('<select name="test" id="sub">').appendTo($replace);
    $.each(model[curSel], function(i,v){
    {
        var $option = $("<option>" + v + "</option>");
        $sel.append($option);
    })
}

Using jQuery each is better generally instead of for in as if prototypes have been extended you could pick up a lot of junk that you wouldn't have expected!