jQuery(this).val() not returning the value of the selected option

I have the following script at the end of my page:

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(function() {
        jQuery('#optElem').change(function(){
            jQuery.post('http://example.com', { 'id1': 1, id2 : jQuery(this).val() },
                function(data){
                    jQuery('#abc').html(data.payload); 
                    jQuery('#abc').effect("highlight", {}, 3000);
                }, "json");
        });
    });
</script>

I have an option select field with id 'optElem'. The code above is supposed to be triggered on the change event, and also I want to pass the value of the selected option to the callback handler.

The c开发者_高级运维hange event is correctly being triggered and captured by jQuery, however, I am getting an empty value for id2 (this is supposed to be the value of the selected item).

I am using JQuery(this).val() - but that is suprisingly, returning a blank value - anyone knows why?

The option select field in the HTML looks likes this:

<div>
    <div>
        <span id="yearElem">Year: </span><span id="optElem">
            <select>
                <option value="2010">2010</option>
                <option value="2009">2009</option>
            </select>
        </span>
    </div>                      
</div>

It's because optElem is a <span>, not a <select>. You are attaching the change event to the span, and as a result, this refers to the span when you are inside the function attached to change.

Since this is the span, it doesn't have a value associated with it.

Your best bet is to give the <select> an id, and attach the change function to it instead. It makes a lot more sense to have the change event be associated with the select rather than a span.

The val() only works on HTML input elements (input, select, textarea, button). You need to move the id="optElem" to the <select> element and it will work.

Try to change row 4 to this:

jQuery('#optElem select').change(function(){

This will make you work on the select element inside the #optElement.

(also see the answer by BalusC, you need to work on a select element, not a span)

Yes! you need to focus on the "Select" element
by doing this!

jQuery('#optElem select:first-child').change(function(){  
            // your codes here
});

Ok, this is a mistake that many of us have made. As @BalusC has stated, jQuery val() will only work with input elements(input, select, textarea, button). Because elements like div, span etc. do not have value attributes, it seems jQuery has decided to not support this function with the others. Now let's assume we have this ul with some li's:

<ul id="tireBrands">
  <li value="Yokohama">Yokohama</li>
  <li value="Michelin">Michelin</li>
  <li value="Continental">Continental</li>
  <li value="Dunlop">Dunlop</li>
</ul>

$('#tireBrands li').click(function(){
    alert($(this).val());//case 1: Will alert 0;
    alert($(this).attr('value'));//case 2: Will still alert 0;
});

So what we need is the value of the value attribute. As said earlier, val() won't work because of the obvious reason. But why do we still get 0 in the second case. Shouldn't attr('attributename') return the actual value of the specified attribute? Haha, the problem is, it seems jquery gets confused when name of the attribute is value, that's why it returns 0. If we were to change the above html like this:

 <ul id="tireBrands">
  <li value1="Yokohama">Yokohama</li>
  <li value1="Michelin">Michelin</li>
  <li value1="Continental">Continental</li>
  <li value1="Dunlop">Dunlop</li>
</ul>

and asked for the value of value1 attribute, then we would get the actual value.

$('#tireBrands li').click(function(){
    alert($(this).val());//case 1: Will alert 0;
    alert($(this).attr('value1'));//case 2: Will alert "Yokohama or Michelin, whichever one is clicked";
});

Finally, here's another setup:

 <ul id="tireBrands">
  <li value="1">Yokohama</li>
  <li value="2">Michelin</li>
  <li value="3">Continental</li>
  <li value="4">Dunlop</li>
</ul>

Now see what happens:

$('#tireBrands li').click(function(){
    alert($(this).val());//case 1: Will alert 1 or 2 or 3 or 4;
    alert($(this).attr('value'));//case 2: Will also alert 1 or 2 or 3 or 4;
});

The difference between the last and the prior 2 html is that, in the last one, value of the value attribute is a numeric value, while in the prior ones it's an alphanumeric value. For some reason jQuery is fine when a custom value attribute has a numeric value and will behave as if it deals with an input like element. I felt a bit lazy to find out the reason behind it. So if you're curious, go explore the jquery source code. Have a nice scripting.