JQuery (this) .val () does not return the value of the selected parameter

Question

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 box with id 'optElem'. The above code should run in the change event, and also I want to pass the value of the selected parameter to the callback handler.

The change event is correctly triggered and jQuery is written, however I get an empty value for id2 (this should be the value of the selected item).

I am using jQuery (this) .val () - but it is amazing returning an empty value - who knows why?

The option box in HTML looks like 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>

Answer 1

, optElem <span>, <select>. , this , , .

this - span, , .

<select> id . , select, span.

Answer 2

val() HTML (input, select, textarea, button). id="optElem" <select>, .

Answer 3

4 :

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

select #optElement.

( . BalusC, select, )

Answer 4

! ""
!

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

Answer 5

, , . @BalusC, jQuery val() (, , , ). , div, span .., value, , jQuery . , ul li:

<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;
});

, value. , val() - . 0 . attr('attributename') ? -, , , jquery , value, 0. html :

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

value1, .

$('#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";
});

, :

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

, :

$('#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 previous 2 html is that in the latter the attribute value valueis a numerical value, and in the previous ones, an alphanumeric value. For some reason, jQuery is fine when the user attribute valuehas a numerical value and behaves as if it were dealing with an input type element. I felt a little lazy to find out the reason for this. So if you're interested, check out the jquery source code. Good script.