プルダウンで元々のoption値を残したまま、selectedを変更する方法

概要

・当初は、年月日のプルダウンで、下記のように書いていた。
・ただそうすると、プルダウンの値は各変数によって挿入された値で選択値を固定されてしまう。
・結果として、ボタンをクリックする以外に、ユーザ自身でプルダウンの値が変更ができなくなる。

<script type="text/javascript">
// 現在日時挿入
$('#setTime').click(function(e){
	e.preventDefault();
	let today    = new Date();
	let year     = today.getFullYear();
	let month    = today.getMonth() + 1;
	let day      = today.getDate();
	let hour     = today.getHours();
	let minutes  = today.getMinutes();
// 年
option_year = '<option value="' + year + '" selected>' + year + '</option>';
document.getElementById('year').innerHTML = option_year;
// 月
option_month = '<option value="' + month + '" selected>' + month + '</option>';
document.getElementById('month').innerHTML = option_month;
// 日
option_day = '<option value="' + day + '" selected>' + day + '</option>';
document.getElementById('day').innerHTML = option_day;
// 時
option_hour = '<option value="' + hour + '" selected>' + hour + '</option>';
document.getElementById('hour').innerHTML = option_hour;
//　分
option_minute = '<option value="' + minutes + '" selected>' + minutes + '</option>';
document.getElementById('minutes').innerHTML = option_minute;
})

解決策

そこで、下記のように書き方を変更。
内容は、prop('selected',false) でselectedされた値を一度外し、条件に一致する場合に限り、再度selectedをつける、というところ。

<script type="text/javascript">
// 現在日時挿入
let today    = new Date();
let year     = today.getFullYear();
let month    = today.getMonth() + 1;
let day      = today.getDate();
let hour     = today.getHours();
let minutes  = today.getMinutes();
// 登録データで選択済テキスト置換
$(function() {
  $('#setTime').on('click',function() {
		// 年
		$('#year option').prop('selected',false).removeAttr('selected').filter(function(){
      return $(this).text() === year.toString();
    }).prop('selected',true).attr('selected','selected');
		// 月
    $('#month option').prop('selected',false).removeAttr('selected').filter(function(){
      return $(this).text() === month.toString();
    }).prop('selected',true).attr('selected','selected');
		// 日
		$('#day option').prop('selected',false).removeAttr('selected').filter(function(){
      return $(this).text() === day.toString();
    }).prop('selected',true).attr('selected','selected');
		// 時
		$('#hour option').prop('selected',false).removeAttr('selected').filter(function(){
      return $(this).text() === hour.toString();
    }).prop('selected',true).attr('selected','selected');
		// 分
		$('#minutes option').prop('selected',false).removeAttr('selected').filter(function(){
      return $(this).text() === minutes.toString();
    }).prop('selected',true).attr('selected','selected');
  });
});
</script>

HTML例

<button type="button" id="setTime">ボタン</button>

<td>
	<select id="year" name="year">
		<option value="2021" selected="selected">2021</option>
	</select>
	年&nbsp;

	<select id="month" name="month">
		<option value="5" selected="selected">5</option>
	</select>
	月&nbsp;

	<select id="day" name="day">
		<option value="17" selected="selected">17</option>
	</select>
	日&nbsp;

	<select id="hour" name="hour">
		<option value="21" selected="selected">21</option>
	</select>
	時&nbsp;

	<select id="minutes" name="minute">
		<option value="39" selected="selected">39</option>
	</select>
	分&nbsp;
</td>

補足

書いた後に、先輩から冗長すぎると指摘を受けたので、下記のような感じに修正しました。
理由は主に、この２つと
　prop('selected' false) removeAttr('selected')
この２つがそれぞれ同じ処理を書いてしまっていたとのこと。
　prop('selected', true) attr('selected','selected')
知識不足ですね。指摘あざす。

<script type="text/javascript">
let today = new Date();
let dateTime = {
	year:    today.getFullYear(),
	month:   today.getMonth() + 1,
	day:     today.getDate(),
	hour:    today.getHours(),
	minutes: today.getMinutes(),
	}
	$(function() {
		$('#setTime').on('click', function() {
			// selectedの解除
			$('#start select option').prop('selected', false);
			//年月日時分
			$.each(dateTime, function(index, value) {
				$('#'+index+' option[value="'+value+'"]').prop('selected', true);
			})
		})
	});
</script>

<td id="start">
	<select id="year" name="year">
		<option value="2021" selected="selected">2021</option>
	</select>
	年&nbsp;
	<button type="button" name="setTime" id="setTime">今日の日付</button>
</td>

配列を使わないなら、こんな感じの書き方。

<script type="text/javascript">
	let today    = new Date();
	let year     = today.getFullYear();
	let month    = today.getMonth() + 1;
	let day      = today.getDate();
	let hour     = today.getHours();
	let minutes  = today.getMinutes();

	$(function() {
		$('#setTime').click(function() {
			// selectedの解除
			$('#start select option').prop('selected', false);
			// 年
			$('#year option[value="'+year+'"]').prop('selected', true);
			// 月
			$('#month option[value="'+month+'"]').prop('selected', true);
			// 日
			$('#day option[value="'+day+'"]').prop('selected', true);
			// 時
			$('#hour option[value="'+hour+'"]').prop('selected', true);
			// 分
			$('#minutes option[value="'+minutes+'"]').prop('selected', true);
		});
	});
</script>

参考
https://teratail.com/questions/142402