Question

如何从两个选择字段中获取数据值并在div中显示它们的总和？

<div class="input_field">
    <label>Type</label>
    <select name="select1" class="dropdown dropdown1">
        <option value selected="selected" data-value="0">Select entry type</option>
        <option value="0" data-value="20">Entry 1 (£20)</option>
        <option value="1" data-value="30">Entry 2 (£30)</option>
    </select>
</div>
<div class="input_field">
    <label>T-shirt</label>
    <select name="select2" class="dropdown dropdown2">
        <option value selected="selected" data-value="0">Choose T-shirt</option>
        <option value="none" data-value="0">No t-shirt</option>
        <option value="size-xs" data-value="8">T-shirt size XS</option>
        <option value="size-s" data-value="9">T-shirt size S</option>
        <option value="size-m" data-value="10">T-shirt size M</option>
        <option value="size-l" data-value="11">T-shirt size L</option>
        <option value="size-xl" data-value="12">T-shirt size XL</option>
    </select>
</div>
<div id="entry_fee">
</div>

下面的JQuery代码

$('select.dropdown').change(function() {
    var sum = 0;
    var1 = $(".dropdown1 :selected").data('value');
    var2 = $(".dropdown2 :selected").data('value');
    sum = var1 + var2;
    $("#entry_fee").html("£" + sum);
})

如果未选择第一个下拉列表，我想隐藏输出。

https://jsfiddle.net/gvub1jp0/

Answer 1

您应该使用data方法在jQuery中处理数据属性。

＆＃13;

$('select.dropdown').change(function(){
    var sum = 0;
    $('select.dropdown :selected').each(function() {
        sum += $(this).data('value');
    });
     $("#output_field").html(sum);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_field">
    <label>Type</label>
    <select id="select1" class="dropdown">
        <option value selected="selected" data-value>Select entry type</option>
        <option value="0" data-value="26">Entry 1 (£26)</option>
        <option value="1" data-value="28">Entry 2 (£28)</option>
    </select>
</div>
<div class="input_field">
    <label>T-shirt</label>
    <select id="select2" class="dropdown">
        <option value selected="selected">Choose T-shirt</option>
        <option value="none" data-value="0">No t-shirt</option>
        <option value="size-xs" data-value="10">T-shirt size XS</option>
        <option value="size-s" data-value="10">T-shirt size S</option>
        <option value="size-m" data-value="10">T-shirt size M</option>
        <option value="size-l" data-value="10">T-shirt size L</option>
        <option value="size-xl" data-value="12">T-shirt size XL</option>
    </select>
</div>
<div id="output_field">
</div>

＆＃13;

Answer 2

Newest Fiddle

我想我现在已经得到了你想要的东西..

＆＃13;

var currentValue;
var currentTotal = parseInt($("#output_field").html(), 10);
$('#select1, #select2').change(function() {
    currentValue = $(this).find(':selected').data('value');
    lastValue = $(this).data('lastvalue');
    $(this).data('lastvalue', currentValue);
    currentTotal = currentTotal - lastValue + currentValue;
    $("#output_field").html(currentTotal);
    // check that both are selected
    if (!$('#select1 :selected').hasClass('instruction') && !$('#select2 :selected').hasClass('instruction')) {
    	$('#output_field').removeClass('hide');
    } else {
    	$('#output_field').addClass('hide');
    }
})

＆＃13;

#output_field.hide { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_field">
    <label>Type</label>
    <select id="select1" class="dropdown" data-lastvalue="0">
        <option value selected="selected" data-value="0">Select entry type</option>
        <option value="0" data-value="26">Entry 1 (£26)</option>
        <option value="1" data-value="28">Entry 2 (£28)</option>
    </select>
</div>
<div class="input_field">
    <label>T-shirt</label>
    <select id="select2" class="dropdown" data-lastvalue="0">
        <option class="instruction" value selected="selected" data-value="0">Choose T-shirt</option>
        <option value="none" data-value="0">No t-shirt</option>
        <option value="size-xs" data-value="10">T-shirt size XS</option>
        <option value="size-s" data-value="10">T-shirt size S</option>
        <option value="size-m" data-value="10">T-shirt size M</option>
        <option value="size-l" data-value="10">T-shirt size L</option>
        <option value="size-xl" data-value="12">T-shirt size XL</option>
    </select>
</div>
<div id="output_field" class="hide">0</div>

＆＃13;

Old Fiddle - to practise on

Answer 3

$("#output_field").html(
    $("#select1 :selected").attr("data-value") + 
    $("#select2 :selected").attr("data-value")
);

如果您将值存储在value=""属性而不是data-value中，则可以像这样访问它：

$("#output_field").html($("#select1").val() + $("#select2").val());

jQuery：将两个选择字段中的两个数据值相加并有条件地显示和

3 个答案: