动态表单选择输入 使用 div 计算无法正常工作

Question

有一些选择输入包装在div中，由选项控制，并且这些选择选项中也有数据值。 隐藏和显示div 运行良好，但有一个非常奇怪的问题是，当我选择第一个选项时，它显示了所有选择选项的计算。但是当我删除选择输入周围的所有div 时，它就可以按照我想要的完美方式工作。

$('body').on('change', '#visitorcount', function() {
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$('#person' + i).show();
$('#country' + i).show();
} else {
$('#person' + i).hide();
$('#country' + i).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index, element) {
if ($(element).parent().css("display") != "none") {
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8" id="person1">
<select class="form-control ct" id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="row visitor" id="person2" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8">
<select name="visitor[2][country]" class="form-control ct" id="country2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
</div>
</div>
</div>
</div>

<div class="row visitor" id="person3" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person4" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person5" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>

<div id="totalcost"></div>

当我们删除选择字段的div 时，它会按照我想要的方式工作。 但我希望它像上面的例子一样，因为还有其他字段要显示。

$('body').on('change', '#visitorcount', function() {
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$('#person' + i).show();
$('#country' + i).show();
} else {
$('#person' + i).hide();
$('#country' + i).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index, element) {
if ($(element).parent().css("display") != "none") {
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8" id="person1">
<select class="form-control ct" id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="row visitor" id="person2" style="display: none;">
<select name="visitor[2][country]" class="form-control ct" id="country2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>


<div class="row visitor" id="person3" style="display: none;">

<select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>


<div class="row visitor" id="person4" style="display: none;">
<select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>


<div class="row visitor" id="person5" style="display: none;">
<select name="person[5][country]" class="form-control ct" id="country5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>


<div id="totalcost"></div>

第一个代码片段有什么问题。 为什么div 会导致此问题？

Answer 1

与其寻找 css 显示，不如使用这样的$(element).is(':visible')

$('body').on('change', '#visitorcount', function() {
var val = $('#country1').val();
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$(`#person${i}`).show();
//Check to see if this is visible, if not
//Set the default value and show it.
if(!$(`#country${i}`).is(':visible')){
$(`#country${i}`).val(val).show();
}
} else {
$(`#person${i}`).hide();
$(`#country${i}`).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index, element) {
if ($(element).is(':visible')) {
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8" id="person1">
<select class="form-control ct" id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="row visitor" id="person2" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label">Citizenship</div>
<div class="col-sm-8">
<select name="visitor[2][country]" class="form-control ct" id="country2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
</div>
</div>
</div>
</div>

<div class="row visitor" id="person3" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person4" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row visitor" id="person5" style="display: none;">
<div class="col-md-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
<div class="col-sm-8">
<select name="person[4][country]" class="form-control ct" id="country5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
<div class="error-message"></div>
</div>
</div>
</div>
</div>
</div>

<div id="totalcost"></div>