Lets say i have function with id paremeter and two select box

<select id="one" onchange="Fill(2)"></select>
<select id="two" onchange="Fill(3)"></select>
<select id="three"></select>

My function

function Fill(id){  
//some manupulation
$('<option/>').val(substr[0]).html(substr[1]).appendTo('#two');
}

But instead of doing many

if(id==2) {$('<option/>').val(substr[0]).html(substr[1]).appendTo('#two');}
if(id==3) {$('<option/>').val(substr[0]).html(substr[1]).appendTo('#three');}

i want something like

$('<option/>').val(substr[0]).html(substr[1]).appendTo(DYNAMIC);

Lets say i have function with id paremeter and two select box

<select id="one" onchange="Fill(2)"></select>
<select id="two" onchange="Fill(3)"></select>
<select id="three"></select>

My function

function Fill(id){  
//some manupulation
$('<option/>').val(substr[0]).html(substr[1]).appendTo('#two');
}

But instead of doing many

if(id==2) {$('<option/>').val(substr[0]).html(substr[1]).appendTo('#two');}
if(id==3) {$('<option/>').val(substr[0]).html(substr[1]).appendTo('#three');}

i want something like

$('<option/>').val(substr[0]).html(substr[1]).appendTo(DYNAMIC);

• javascript
• jquery

Share Improve this question Follow asked May 21, 2012 at 16:11 Novkovski Stevo BatoNovkovski Stevo Bato 1,04322 gold badges2424 silver badges5656 bronze badges 1

• 1 I'm not entirely sure, hence the ment, but it looks like you just want to append the new option to the currently-changed element? So...wouldn't $('<option />').val(/*..*/).html(/*..*/).appendTo($(this)); work? – David Thomas Commented May 21, 2012 at 16:19

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You could make it much easier by using ids such as select-1, select-2 etc. and then use '#select-' + id.

Otherwise you need a mapping object which maps from digits to spelled numbers.

function Fill(id){  
  var index = {
    1: 'one',
    2: 'two',
    3: 'three'; 
  };
  $('<option/>').val(substr[0]).html(substr[1]).appendTo('#' + index[id]);
  // or just, but in this case you need to change the *id* pattern like opt_1, opt_2 etc
  $('<option/>').val(substr[0]).html(substr[1]).appendTo('#opt_' + id);
}

easier than you think :)

<select id="select-1" onchange="Fill(2)"></select>
<select id="select-2" onchange="Fill(3)"></select>
<select id="select-3"></select>

function Fill(id){ // 
    //some manupulation
    $('<option/>').val(substr[0]).html(substr[1]).appendTo('select-' + id);
}

I'm going to go with David Thomas' suggestion:

<select id="one" onchange="Fill(this);"></select>
<select id="two" onchange="Fill(this);"></select>
<select id="three"></select>

With the Fill function defined as:

function Fill(select) {
    $('<option />').val(/*..*/).html(/*..*/).appendTo($(select));
}

You would then be able to give your selects whatever id that you want, and you would not have to query the DOM to find the object.

Add this line to the top of Fill function:

 var DYNAMIC = $(this);