JavaScriptで連動したプルダウンを変更させたい。

JavaScriptで連動しているプルダウンを変更すると明示的に変更したプルダウンは変更できるのですが
それに対応したプルダウンが変更されません。
手動だと変更されます。原因は何でしょうか？対処法などございますか？

JavaScriptで変更した場合
↑「▼市選択」が選択されない

手動で変更した場合

↑「▼市選択」が選択される

以下プルダウンを「愛知県」に変更するJavaScript

JavaScript
1javascript:
2var select = document.getElementById("selPref").value = "23";
3

HTML5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Sample</title>
6  <script src="sample.js"></script>
7</head>
8<body>
9  <select id="selPref" onchange="selPref(this);"></select>
10  <select id="selCity"></select>
11</body>
12</html>
13

JavaScript
1//都府県の選択肢
2var arr = [
3  {cd:"", label:"▼都府県選択"},
4  {cd:"13", label:"東京都"},
5  {cd:"23", label:"愛知県"},
6  {cd:"27", label:"大阪府"}
7];
8 
9//市区の選択肢
10var arrTokyo = [
11  {cd:"", label:"▼区選択"},
12  {cd:"1", label:"新宿区"},
13  {cd:"2", label:"千代田区"},
14  {cd:"3", label:"中央区"}
15];
16var arrAichi = [
17  {cd:"", label:"▼市選択"},
18  {cd:"1", label:"名古屋市"},
19  {cd:"2", label:"豊橋市"},
20  {cd:"3", label:"岡崎市"},
21  {cd:"4", label:"豊田市"},
22  {cd:"5", label:"一宮市"}
23];
24var arrOsaka = [
25  {cd:"", label:"▼市選択"},
26  {cd:"1", label:"大阪市"},
27  {cd:"2", label:"堺市"},
28  {cd:"3", label:"東大阪市"},
29  {cd:"4", label:"枚方市"},
30  {cd:"5", label:"豊中市"},
31  {cd:"6", label:"吹田市"},
32  {cd:"7", label:"高槻市"}
33];
34 
35//都府県コンボの生成
36window.onload=function(){
37  for(var i=0;i<arr.length;i++){
38    let op = document.createElement("option");
39    op.value = arr[i].cd;
40    op.text = arr[i].label;
41    document.getElementById("selPref").appendChild(op);
42  }
43}
44 
45//都府県が選択された時に呼び出される処理
46function selPref(obj){
47  var targetArr;
48  if(obj.value == "13"){
49    targetArr = arrTokyo;
50  }else if(obj.value == "23"){
51    targetArr = arrAichi;
52  }else if(obj.value == "27"){
53    targetArr = arrOsaka;
54  }else{
55    targetArr = new Array();
56  }
57  var selObj = document.getElementById('selCity');
58  while(selObj.lastChild){
59    selObj.removeChild(selObj.lastChild);
60  }
61  for(var i=0;i<targetArr.length;i++){
62    let op = document.createElement("option");
63    op.value = targetArr[i].cd;
64    op.text = targetArr[i].label;
65    selObj.appendChild(op);
66  }
67}

参考サイト

行動規範の内容に同意します

回答1件

ベストアンサー

すみません、質問を理解できていませんでした。

selPrefが変更されたときにselCityの選択肢を更新したいということですね。
input要素のchangeイベントはユーザーの入力があった場合に反応します。
なので、JSで変更した場合は反応しません。
例えば、<input type="textbox" oncahnge="console.log(this)" >に対してJSでvalueを書き換えてもconsole.log(this)は実行されません。
なので、oncahngeに設定している関数を直接呼び出せばよいです。

js
1var select = document.getElementById("selPref");
2select.value="23";
3selPref(select);

もしくは、イベントでの呼び出しとして一貫性をもたせたいのなら、selectでchangeイベントを発火します。

js
1var select = document.getElementById("selPref");
2select.value="23";
3select.dispatchEvent(new Event( "change"));

先程の回答のselect.valueを書き換えても選択肢は変わらない、は自分の勘違いでした…お恥ずかしい

旧回答

~~選択したいoption要素にselected属性を付与します。~~

js
1var select = document.getElementById("selPref");
2select.querySelectorAll('option').forEach(op => {
3  if (op.value == '23') op.selected = true;
4});

投稿2022/02/06 07:00

編集2022/02/06 22:11

kairi003

総合スコア1332

aaaich

2022/02/06 07:02

回答ありがとうございます。なぜ手動だと変更されるのに、JavaScript経由だと変更されないのでしょうか

aaaich

2022/02/06 07:02

わかればでよいので教えていただけないでしょうか

kairi003

2022/02/06 07:03

JavaScriptだと、というのはselectのvalueを直接変更した場合、ということでしょうか

aaaich

2022/02/06 07:05 編集

はい、 var select = document.getElementById("selPref").value = "23" で指定した場合です。勉強した手なので、初歩的な質問かもしれません。

kairi003

2022/02/06 07:08

selectのvalueは、内包するoptionのうち新たに選択された(selected属性がついた)もののvalueに更新され、表示されるテキストはselected属性のついたoptionのものになります。つまり、選択したoptionの内容がselectに反映されるのであって、select自体をいじってもoptionが選択されることはありません。選択肢を選択したいならjavascriptで選択したいoptionにselected属性を付与します。

aaaich

2022/02/06 07:14 編集

理解できないですｗｗｗｗｗｗ勉強します・・・回答ありがとうございました。

aaaich

2022/02/06 09:11

すみません、上記ためしたところ、連動したプルダウンが選択されませんでした。何がいけないのでしょうか var select = document.getElementById("selPref"); select.querySelectorAll('option').forEach(op => { if (op.value == '23') op.selected = true; });

aaaich

2022/02/06 09:13

試したものは以下 javascript: var select = document.getElementById("selPref"); select.querySelectorAll('option').forEach(op => { if (op.value == '23') op.selected = true; });

kairi003

2022/02/06 13:35 編集

コメント削除

kairi003

2022/02/06 13:47

ごめんなさい、色々勘違いしてました

aaaich

2022/02/20 03:58

すみません、返信していたと思ったらできていませんでした。わざわざ、修正してまでご回答いただきありがとうございます。励みになります！

行動規範の内容に同意します