jQuery（this）.val（）不返回所选选项的值

我的页面末尾有以下脚本：

<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>

jQuery.noConflict（）；
jQuery（函数（）{
jQuery（'#optElem'）.change（function（）{
jQuery.post（'http://example.com“，{'id1'：1，id2:jQuery（this.val（）}，
功能（数据）{
jQuery（'#abc'）.html（data.payload）；
jQuery（'#abc'）.effect（“highlight”，{}，3000）；
}“json”）；
});
});

我有一个id为“optElem”的选项选择字段。上面的代码应该在更改事件时触发，我还想将所选选项的值传递给回调处理程序

jQuery正确地触发并捕获了更改事件，但是，我得到的id2值为空（这应该是所选项的值）

我使用的是JQuery（this）.val（）——但令人惊讶的是，它返回了一个空白值——有人知道为什么吗

HTML中的选项选择字段如下所示：

<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>

年份：
2010
2009

仅适用于HTML输入元素（

输入

，

选择

，

文本区

，

按钮

）。您需要将

id=“optElem”

移动到

元素，它就会工作。

尝试将第4行更改为：

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

这将使您能够处理#optElement中的select元素

---

（另请参见BalusC的答案，您需要处理一个select元素，而不是span）

这是因为

optElem

是一个

，而不是

。您正在将更改事件附加到范围，因此，

当您在附加到更改的函数中时，此

引用范围

由于

此

是范围，因此它没有与之关联的值

---

最好的办法是给

一个id，然后将更改功能附加到它上。将更改事件与

select

相关联，而不是与

span

相关联，这样做更有意义！您需要关注“选择”元素
通过这样做

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

---

好吧，这是我们很多人都犯过的错误。正如@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;
});

并询问

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>

最后一个html与前两个html的区别在于，在最后一个html中，

value

属性的值是一个数值，而在前一个html中，它是一个字母数字值。出于某种原因，当自定义

值

属性有一个数值时，jQuery就可以了，它的行为就像处理一个类似于输入的元素一样。我有点懒得去找出背后的原因。因此，如果您感到好奇，请探索jquery源代码。有一个很好的脚本。

（脸红）-我不敢相信我错过了。谢谢

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