自定義屬性，而不是val（）

Question

我從來不需要jQuery，因爲我可以在網上找到更多。我正在嘗試對select/option中的自定義html屬性進行「實時」計數。

我用這個腳本工作正常，但不幸的是我需要數據從值發送到PHP，並需要使用自定義數據屬性。我不知道如何訪問選項，而不是val（） - 我試過$ ksm，$ data（'ksm'）和一些其他奇怪的想法，但它不起作用。

JS：

<script type='text/javascript'> 
    //<![CDATA[ 
    $(window).load(function(){ 
    $("[id$=nr]").change(function() { 
     var total = 0;  
     $('.zawodnik select').each(function() { 
      total = total + Number($(this).val()); 
     }); 
     $('div#sumaksm').html(total); 
    }); 
    }); 
    //]]> 
</script> 

HTML（zaw1到zaw7是exactle相同）：

<tr><td class="zawodnik"> 
<select name="zaw3" id="3nr"> 
     <option value="1" class="rider" data-ksm="10.40">Nicki Pedersen (10.40)</option> 
     <option value="2" class="rider" data-ksm="9.58">Niels Kristian Iversen (9.58)</option> 
     <option value="3" class="rider" data-ksm="9.28">Chris Holder (9.28)</option> 
     <option value="4" class="rider" data-ksm="9.27">Greg Hancock (9.27)</option> 
</select> 
</td></tr> 
Your KSM: <div id="sumaksm">-select riders-</div> 

而且我對我的英語不好:)

Answer 1

使用.data()方法

$(window).load(function(){ 
    $("[id$=nr]").change(function() { 
     var total = 0;  
     $('.zawodnik select').each(function() { 
      var option = this.options[ this.selectedIndex ]; 
      total = total + parseFloat($(option).data('ksm')); 
     }); 
     $('div#sumaksm').html(total); 
    }); 
    }); 

演示在http://jsfiddle.net/gaby/bxuCw/2/

Answer 2

抱歉，你可以用' .attr（）'

$(this).attr('data-ksm') 

Answer 3

我會建議：

$('select').change(function(){ 
    var self = $(this); 
    $('#sumaksm').text(self.find('option:selected').data('ksm')); 
}); 

JS Fiddle demo。

但如果你真的做（出於某種原因）要總結的data-ksm屬性每次select變化：

$('select').change(function(){ 
    var self = $(this), 
     total = 0; 
    self.find('option').each(function(){ 
     total += parseFloat($(this).data('ksm')); 
    }); 
    $('#sumaksm').text(total); 
}); 

JS Fiddle demo。

繼加比的提示（註釋中，下），我建議：

$('[id$=nr]').change(function(){ 
    var total = 0; 
    $('[id$=nr]').each(function(){ 
     total += parseFloat($(this).find('option:selected').data('ksm')); 
    }); 
    $('#sumaksm').text(total); 
}); 

JS Fiddle demo。

參考文獻：

• change()。
• data()。
• find()。
• text()。