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>

我有一个选项字段，其id为'optElem'。上面的代码应该在change事件上触发，我也想将所选选项的值传递给回调处理程序。

更改事件正由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中的select元素。

（另请参阅BalusC的答案，你需要处理一个选择元素，而不是跨度）

Answer 4

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

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

Answer 5

好的，这是我们许多人犯的错误。正如@BalusC所说，jQuery val()只能用于输入元素（输入，选择，文本区域，按钮）。因为div，span等元素没有value属性，所以似乎jQuery决定不支持其他功能。现在让我们假设我们有一些问题：

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

最后一个和前一个2 html之间的差异在于，在最后一个中，value属性的值是数值，而在先前的值中，它是一个字母数字值。出于某种原因，当自定义value属性具有数值并且其行为就像处理类似输入一样时，jQuery很好。我觉得有点懒，找不到背后的原因。因此，如果您有点好奇，请去探索jquery源代码。有一个很好的脚本。

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

5 个答案: