自定义属性，而不是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()。