如果在 Jquery 中选择了日、月或年默认值，如何清空所有选择字段值

Question

请查看下面的代码，如果选择了日，月或年默认值，我正在尝试清除所有选择字段值，如果未选择默认值，则应显示选择的值并更新隐藏的输入字段，但由于某种原因它没有。

$('.date-dropdowns').on('change', '.day,.month,.year', function() {
		var d = $(this).parent().find('.day').val();
		var m = $(this).parent().find('.month').val();
		var y = $(this).parent().find('.year').val();
		var dmy = d + '/' + m + '/' + y;
		
		if(d === "" || m === "" || y === ""){
			$(this).parent().find('input[type=hidden]').val('');
			$(this).parent().find('select').prop('selectedIndex',0);
		}else{
			$(this).parent().find('input[type=hidden]').val(dmy);
		}
		
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="date-dropdowns">
<input type="hidden" id="acf-field_5a7cbdad4e6af-0-field_5a7b65d4e90ca-field_5a7b665f779f4" name="acf[field_5a7cbdad4e6af][0][field_5a7b65d4e90ca][field_5a7b665f779f4]" value="" required="required">
<select class="day" name="date_[day]">
<option value="">Day</option>
<option value="01">1st</option>
<option value="02">2nd</option>
<option value="03">3rd</option>
<option value="04">4th</option>
</select>
<select class="month" name="date_[month]">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="year" name="date_[year]">
<option value="">Year</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
</select>
</div>

Answer 1

这是因为您的检查条件表明，如果年、月或日为默认值，则所有值都将重置为默认值。这始终是正确的，因为用户一次只能更改一个，其他必须为默认值。您可能只想检查用户选择的那个是否为默认值。

$('.date-dropdowns').on('change', '.day,.month,.year', function() {
var d = $(this).parent().find('.day').val();
var m = $(this).parent().find('.month').val();
var y = $(this).parent().find('.year').val();
var dmy = d + '/' + m + '/' + y;
if ($(this).val() === '') {
$(this).parent().find('input[type=hidden]').val('');
$(this).parent().find('select').prop('selectedIndex', 0);
} else {
$(this).parent().find('input[type=hidden]').val(dmy);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="date-dropdowns">
<input type="hidden" id="acf-field_5a7cbdad4e6af-0-field_5a7b65d4e90ca-field_5a7b665f779f4" name="acf[field_5a7cbdad4e6af][0][field_5a7b65d4e90ca][field_5a7b665f779f4]" value="" required="required">
<select class="day" name="date_[day]">
<option value="">Day</option>
<option value="01">1st</option>
<option value="02">2nd</option>
<option value="03">3rd</option>
<option value="04">4th</option>
</select>
<select class="month" name="date_[month]">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="year" name="date_[year]">
<option value="">Year</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
</select>
</div>