Question

I have an array of drop-downs in a page, one for each row in a list of records.
I need to update a DIV’s content in the row of the drop-down that triggers each change event.

Something like this:

<div class="price"></div>

<select id="plan[]" name="plan[]" class="sel">
  <option value="0" selected="selected">None</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>   


$(function() {
    $('#plan').change(function(){
        $(this).prevAll('.price:first').html('foo bar');
    });
});

The change event never fires, what am I missing? Here’s a fiddle to test

Answer 1

Try using startswith wild card with id selector.

Live Demo

$(function() {
    $('[id^=plan]').change(function(){
        $('.price:first').html('foo bar');
    });
});

If you have single item and do not need wild card you can do it with id selector like this.

Live Demo

$(function () {
  $('[id="plan[]"]').change(function () {
    $(this).prev('.price').html('foo bar');
  });
});