Как очистить все выбранные значения поля, если в Jquery выбрано значение по умолчанию для дня, месяца или года - PullRequest
Новая
       9

Как очистить все выбранные значения поля, если в Jquery выбрано значение по умолчанию для дня, месяца или года

0 голосов
/ 16 мая 2018

Пожалуйста, просмотрите мой код ниже, я пытаюсь очистить все выбранные значения поля, если выбрано день, месяц или год значение по умолчанию, а если значение по умолчанию не выбрано, то выбранное значение должно быть показано и обновлено.скрытое поле ввода, но по какой-то причине это не так. 

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

1 Ответ

0 голосов
/ 16 мая 2018

Это потому, что ваше условие проверки показало, что если по умолчанию используется год, месяц или день, все значения сбрасываются на значения по умолчанию.Это всегда верно, так как пользователь может менять только по одному, остальные должны быть по умолчанию в это время.Возможно, вы захотите проверить только тот, который выбран пользователем по умолчанию или нет. 

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