jQuery(this).val() 不返回所选选项的值答案

【问题标题】：jQuery(this).val() not returning the value of the selected optionjQuery(this).val() 不返回所选选项的值
【发布时间】：2010-01-03 21:32:05
【问题描述】：

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

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

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

jQuery 正确触发和捕获了 change 事件，但是，我得到 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>

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

这是因为 optElem 是 <span>，而不是 <select>。您将更改事件附加到跨度，因此，this 指的是跨度，当您在附加到更改的函数内时。

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

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

【讨论】：

(脸红) - 我不敢相信我错过了。谢谢

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试将第 4 行更改为：

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

这将使您在 #optElement 内的选择元素上工作。

（另见BalusC的答案，您需要处理选择元素，而不是跨度）

【讨论】：

【解决方案4】：

是的！您需要专注于“选择”元素
通过做这个！

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

【讨论】：

【解决方案5】：

好的，这是我们很多人都犯过的错误。正如@BalusC 所说，jQuery val() 仅适用于输入元素（输入、选择、文本区域、按钮）。因为像 div、span 等元素没有value 属性，看来 jQuery 已经决定不与其他元素一起支持此功能。现在让我们假设我们有这个带有一些 li 的 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') 不应该返回指定属性的实际值吗？哈哈，问题是，当属性名称为value 时，jquery 似乎会混淆，这就是为什么它返回 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;
});

最后一个和前两个 html 的区别在于，在最后一个 html 中，value 属性的值是一个数值，而在前一个它是一个字母数字值。出于某种原因，当自定义 value 属性具有数值时，jQuery 很好，并且会表现得好像它处理类似元素的输入。我有点懒得找出背后的原因。因此，如果您好奇，请去探索 jquery 源代码。编写一个漂亮的脚本。

【讨论】：