Question

我从不需要jQuery，因为我可以在网上找到更多。我正在尝试从select / option中“自定”计算自定义html属性。

我使用了这个工作正常的脚本，但不幸的是我需要从value发送数据到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完全相同）：

<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

您可以使用'.attr（）'

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

Answer 2

我建议：

$('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

参考文献：

Answer 3

使用.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/

演示

自定义属性而不是val（）

3 个答案: