JavascriptでselectedIndexをセットした際に表示が変わらない

Question

前提・実現したいこと

selectタグが複数あり、変更した際（onChange時）に、
Javascriptで別のselectタグのselectedIndexを初期化（0をセット）したいのですが、
表示が変わらなくて困っております。
助言いただけますと幸いです。
※selectedIndexのセットは動作している？ようですが表示が変わらないです。
→変更した対象のプルダウンをクリックするとカーソルは最上部（index=0）にフォーカスしています。

2021.06.27 追記
仕様説明が不足しておりましたので、追記いたします。

<li>タグで分けている２つのselectがグループとなります。 片方を変更したらもう片方を初期化したいです。 例） 　selNm1を変更したらselNm2をselectedIndex=0 　selNm2を変更したらselNm1をselectedIndex=0　としたいです 　※selNm3,4についても同様になります

2021.06.27 追記②

該当のソースコード

<form name="sel_form">
<ul>
	<li class="select"><h3>テスト①</h3>
		<select id="sel1" name="selNm1" onChange="resetSelect('0')">
			<option value="0">選択して下さい</option>
			<option value="1">佐藤</option>
			<option value="2">田中</option>
		</select>
		<select id="sel2" name="selNm2" onChange="resetSelect('1')">
			<option value="0">選択して下さい</option>
			<option value="1">さとう</option>
			<option value="2">たなか</option>
		</select>
	</li>
	<li class="select"><h3>テスト②</h3>
		<select id="sel3" name="selNm3" onChange="resetSelect('2')">
			<option value="0">選択して下さい</option>
			<option value="1">SATOU</option>
			<option value="2">TANAKA</option>
		</select>
		<select id="sel4" name="selNm4" onChange="resetSelect('3')">
			<option value="0">選択して下さい</option>
			<option value="1">satou</option>
			<option value="2">tanaka</option>
		</select>
	</li>
</ul>
</form>

function resetSelect(target){
	if (target == "0") {
		document.sel_form.selNm1.selectedIndex = 0;
	} else if (target == "1") {
		document.sel_form.selNm2.selectedIndex = 0;
	} else if (target == "2") {
		document.sel_form.selNm3.selectedIndex = 0;
	} else if (target == "3") {
		document.sel_form.selNm4.selectedIndex = 0;
	}
}

試したこと

querySelectorを使用してidからエレメントを取得してselectedIndexをセットしましたがNGでした。

補足情報（FW/ツールのバージョンなど）

HTML5
ブラウザ：Edge/Chrome/Firefox

Comments

[yh1224]

option はすべて 0 のみなので選択できないんですが、ソースは省略されたものでしょうか？
また、このソースだと「変更した select タグの selectedIndex を 0 に」している気がします。

[entaro12345]

失礼しました。
実際は、大量にデータがあります（各selectタグに20個程度）
追記いたしました。

[int32_t]

質問文のコードだとselNm1からselNm4にはoptionが1つしかないので、selectedIndex=0しても表示は変わりようがないように思えます。

[kei344]

option が1つしかないので変わりようが有りませんが、例示のためのものだとすれば、書かれている状況が再現するコードを提示されたほうが回答を得やすいと思います。追記：編集前のものを見ていました、すみません

[YT0014]

追加いただいた画面写真ですが、どの状態の、どのselectに該当するものなのでしょうか？

[entaro12345]

質問ありがとうございます。

id="sel2"を変更した際のid="sel1"のキャプチャになります。

[YT0014]

追加いただいた画面写真ですが、id="sel2"を変更した際のid="sel1"のキャプチャでしたら、仕様通りの挙動ではないでしょうか？
正しい状態の例示ですか？誤っている状態の例示ですか？
この質問文以外の情報がない者が見て、理解できるように、情報をご提示ください。

Answer 1

        <select id="sel1" name="selNm1" onChange="resetSelect('0')">
            <option value="0">選択して下さい</option>
            <option value="1">佐藤</option>
            <option value="2">田中</option>
        </select>

selNm1が変更された時に呼び出されるのは、resetSelect('0')です。
この時、該当メソッドでは、

    if (target == "0") {
        document.sel_form.selNm1.selectedIndex = 0;
    } else if (target == "1") {

が実行されるので、selNm1が、「選択してください」となりますが、それ以外のselectタグに対しては、何も処理していません。
当然、別のselectタグは変更されません。

修正：ペア単位で、一方を選択した場合、他方を「選択して下さい」にしたいとのことなので。
yh1224さんにご提示頂いたように、以下のコードになるかと。

    if (target == "0") {
        document.sel_form.selNm2.selectedIndex = 0;
    }
    if (target == "1") {
        document.sel_form.selNm1.selectedIndex = 0;
    }

resetSelect()として作成するべきは、全selectに対して、targetに一致しない場合に、selectedIndexを0にするというメソッドです。

以下のコードは、ペア単位仕様判明前のものです。

    if (target != "0") {
        document.sel_form.selNm1.selectedIndex = 0;
    }
    if (target != "1") {
        document.sel_form.selNm2.selectedIndex = 0;
    }

ですが、この仕様を実装すると、４つのselectのうち、「選択してください」以外に設定できるのは、１つのselectだけになります。
これは、想定の仕様通りでしょうか？

Comments

[entaro12345]

ご回答ありがとうございます。
また、説明が不足しており大変申し訳ございません。
追記いたしますが、<li>タグで分けている２つのselectがグループとなります。
例）
　selNm1を変更したらselNm2をselectedIndex=0
　selNm2を変更したらselNm1をselectedIndex=0　としたいです
　※selNm3,4についてもどうようになります

[yh1224]

document.sel_form.selNm1.selectedIndex = 0; と
document.sel_form.selNm2.selectedIndex = 0; を
入れ替えるだけではだめです？

[YT0014]

例の場合、selNm1で「佐藤」を選択したらselNm2は「選択してください」から変更しない、という仕様で問題ないのですね？
ご提示いただいた仕様だと、selNm1で「佐藤」を選択(selNm2初期化)後、selNm2で「さとう」を選択したら、selNm1は「選択してください」に戻るんですが。

[entaro12345]

ありがとうございます。
仕様は仰るとおりで問題ございません。
たしかに、プルダウンを選択してみるとフォーカスは「選択してください」にあたっているように見えます。
→グレー色になってます。
しかし、表示（選択値）が「佐藤」のままになってしまいます。
※実際の画面のキャプチャを貼らせていただきます（「佐藤」とかではございませんが。）

[YT0014]

entaro12345さんの記述された「フォーカス」とは何を意味しているのでしょうか？
SelNm1が「選択してください」でSelNm2が「さとう」の状態で、SelNm1を「佐藤」に変更したら、SelNm1、SelNm2は、それぞれ、どうなってほしいのでしょうか？
こちらで把握している仕様では、SelNm1は「佐藤」のまま、SelNm2が「選択してください」、マウスでの変更なら、フォーカスはSelNm1を維持が正しいのですが。
resetSelect()を、yh1224さんのご指摘の通りに変更した場合、FireFoxでは、上記のような動作になることを確認しております。

[entaro12345]

返信が遅くなり申し訳ありません。

>SelNm1が「選択してください」でSelNm2が「さとう」の状態で、SelNm1を「佐藤」に変更したら
SelNm1は「佐藤」、SelNm2は「選択してください」になってほしいです。。