Question

I have two placeholders for two different html selects that will be created dynamically

var dropdown1 = '#select1';
var dropdown2 = '#select2';

at a later moment in time I dynamically create the elements and attach an event…

$('some div').append(dropdown1);
$('some div').append(dropdown2);
$(dropdown1).append('<option>' + value + '</option>'); 
$(dropdown1).append('<option>' + value + '</option>'); 

then I add an event listener…

$(document.body).on('change', dropdown1, function() {
alert($(dropdown1).val());
alert($(dropdown2).val());

});

I want to be able to get the value of both dropdown 1 AND dropdown 2. Instead I get an empty array or undefined.

Anyone has any idea how I can get both values for these dynamically created selects ?

Answer 1

You’re not holding a reference to a jQuery object, just a string of the id. Try this:

$(document).on('change', dropdown1, function() {
    alert($(dropdown1).val()); /* or, you could use $(this).val() */
    alert($(dropdown2).val());    
});

This will only fire when you change the first drop down because of the selector parameter passed to on().