的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的源代碼。有一個很好的腳本。