的jQuery（这）.VAL（）没有返回所选选项

Question

的价值我有我的页面末尾下面的脚本：

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

我有身份证“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> 

Answer 1

这是因为optElem是<span>，而不是一个<select>。您将更改事件附加到范围，因此，this指的是当您位于附加功能更改范围内时的范围。

由于this是跨度，因此它没有与其关联的值。

最好的办法是给<select>一个id，然后附上更改函数。使更改事件与select而不是span相关联会更有意义。

Answer 2

的val()仅适用于HTML 输入元素（input，select，textarea，button）。您需要将id="optElem"移动到<select>元素，它将起作用。

Answer 3

尝试改变排4本：

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

这会让你的#optElement内选择的元素上工作。

（另见BalusC答案，你需要选择一个元素，而不是一个跨度上工作）

Answer 4

是的！你需要关注“选择”元素
这样做！

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

Answer 5

好的，这是我们很多人犯的一个错误。正如@BalusC所说，jQuery val()只能使用输入元素（input，select，textarea，button）。由于div，span等元素没有value属性，因此似乎jQuery决定不支持其他功能。现在让我们假设我们有这个UL一些李时珍：

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

最后和之前的2 HTML之间的区别在于，在最后一节， value属性的值是一个数字值，而在之前的属性中，它是一个字母数字值。出于某种原因，当自定义的value属性具有数值并且表现得像处理像元素一样的输入时，jQuery很好。我觉得有点懒，找出背后的原因。所以，如果你很好奇，去探索jQuery的源代码。有一个很好的脚本。