Question

I have multiple <select id="direction_X"></select> generated by my php script. X is its ID. I am trying to select those elements by doing so:

$('select[id*="direction_"]').live('change', function() {
     selected = $('select[id*="direction_"] option:selected');
     option_ID = $(selected).val();

     console.log(option_ID);
}

In fact, when I use I am getting the option_ID, but if I try to use any other I am getting the same option_ID from all the time.

If you click first, it gives you (an empty string) and when you click after it gives you the correct ID from the first

Answer 1

You should use this keyword which refers to the current select element.

$('select[id^="direction_"]').on('change', function() {
     var selected = $(this).val(); // this.value
     console.log(selected);
})

Note that live method is deprecated, you can use on method instead, if the select elements are generated by php, there is no need to use event delegation, in case that elements are generated after page is loaded, the correct way of delegating event using on method is:

$(document).on('change', 'select[id^="direction_"]', function() {

Attribute Starts With Selector
| on