使用jquery和.change（）选择html元素ID

Question

I have several <select> boxes all using the same prefix and I would like to set up a recursive function to essentially do the work for me.

$('[id^="by_"]').change(function(e)
            {
                var elem = e;
                console.log(e.value);
            });

Based on this code is my intention pretty clear? Am I on the right track?

console prints out: undefined

Answer 1

I think you're on the right track - the selector you're using matches a prefix of "by_", and you're binding the change event to all of them. Make sure you put this in $(document).ready or similar. Are you having any problems with this code? Instead of using the e parameter, I would just use this inside of the function to refer to the element and $(this) to get the jQuery object of it. So to get the value, you'd use:

this.value
// or
$(this).val()

(ignore the e and elem stuff, although it wouldn't be a bad idea to store $(this) in something like elem so you can have a reference to it instead of re-creating the jQuery object every time you need it)

When using callbacks to events with jQuery, the (first) parameter of the callback is an event object that explains many things about the event that occurred ( http://api.jquery.com/category/events/event-object/ ) and does not hold the element - that's what this is for!

Answer 2

e in your code is the event object which has no value property, you should use this instead:

$('[id^="by_"]').change(function(e) {
     var elem = this;
     console.log(this.value);
});

Or if you want to use event object, you can use target property:

e.target.value

Answer 3

Since you're already using jQuery, why not something like this:

$('[id^="by_"]').change(function(e)
{
    var $elem = $( this );
    console.log( $elem.val() );
});

Answer 4

Isn't it more something like that:

$('[id^="by_"]').change(function()
            {
                console.log($('option:selected',this).val());
            });
​

jsfiddle