Form内のselectを連動させるにはどうしたらよろしいでしょうか

締切済

質問者：KobeFine
質問日時：2020/11/22 04:47
回答数：1件

select文が二つあり、前のselectを変更すると後のselectが連動して項目を変えることは成功したのですが、次のプログラムに送る為にこのselect文2個をFormで囲むと連動しません。基本的なことで申し訳ありませんがどなたかご教授ください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="sample.js"></script>
</head>
<body>
<FORM>
<select name="name" id="selPref" onchange="selPref(this);"></select>
<select name="name" id="selCity"></select>
</FORM>
<div id="innerHTMLtxt"></div>
</body>
</html>

sample.js
//都府県の選択肢
var arr = [
{cd:"", label:"Country selection"},
{cd:"1", label:"Japan"},
{cd:"2", label:"USA"},
{cd:"3", label:"England"}
];

//市区の選択肢
var arrJapan = [
{cd:"", label:"▼都道府県選択"},
{cd:"1",label:"北海道"},
{cd:"2",label:"青森県"},
{cd:"3",label:"岩手県"},
{cd:"4",label:"秋田県"},
{cd:"5",label:"宮城県"},
{cd:"6",label:"山形県"},
{cd:"7",label:"福島県"},
{cd:"8",label:"新潟県"},
{cd:"9",label:"茨城県"},
{cd:"10",label:"栃木県"},
{cd:"11",label:"群馬県"},
{cd:"12",label:"千葉県"},
{cd:"13",label:"埼玉県"},
{cd:"14",label:"東京都"},
{cd:"15",label:"神奈川県"},
{cd:"16",label:"山梨県"},
{cd:"17",label:"長野県"},
{cd:"18",label:"富山県"},
{cd:"19",label:"静岡県"},
{cd:"20",label:"愛知県"},
{cd:"21",label:"岐阜県"},
{cd:"22",label:"石川県"},
{cd:"23",label:"福井県"},
{cd:"24",label:"三重県"},
{cd:"25",label:"滋賀県"},
{cd:"26",label:"京都府"},
{cd:"27",label:"奈良県"},
{cd:"28",label:"大阪府"},
{cd:"29",label:"兵庫県"},
{cd:"30",label:"和歌山県"},
{cd:"31",label:"鳥取県"},
{cd:"32",label:"岡山県"},
{cd:"33",label:"島根県"},
{cd:"34",label:"広島県"},
{cd:"35",label:"山口県"},
{cd:"36",label:"徳島県"},
{cd:"37",label:"香川県"},
{cd:"38",label:"高知県"},
{cd:"39",label:"愛媛県"},
{cd:"40",label:"福岡県"},
{cd:"41",label:"大分県"},
{cd:"42",label:"佐賀県"},
{cd:"43",label:"長崎県"},
{cd:"44",label:"熊本県"},
{cd:"45",label:"宮崎県"},
{cd:"46",label:"鹿児島県"},
{cd:"47",label:"沖縄県"}
];

var arrUSA = [
{cd:"1",label:"Delaware"},
{cd:"2",label:"Pennsylvania"},
{cd:"3",label:"New Jersey"},
{cd:"4",label:"Georgia"},
{cd:"5",label:"Connecticut"},
{cd:"6",label:"Massachusetts"},
{cd:"7",label:"Maryland"},
{cd:"8",label:"South Carolina"},
{cd:"9",label:"New Hampshire"},
{cd:"10",label:"Virginia"},
{cd:"11",label:"New York"},
{cd:"12",label:"North Carolina"},
{cd:"13",label:"Rhode Island"},
{cd:"14",label:"Vermont"},
{cd:"15",label:"Kentucky"},
{cd:"16",label:"Tennessee"},
{cd:"17",label:"Ohio"},
{cd:"18",label:"Louisiana"},
{cd:"19",label:"Indiana"},
{cd:"20",label:"Mississippi"},
{cd:"21",label:"Illinois"},
{cd:"22",label:"Alabama"},
{cd:"23",label:"Maine"},
{cd:"24",label:"Missouri"},
{cd:"25",label:"Arkansas"},
{cd:"26",label:"Michigan"},
{cd:"27",label:"Florida"},
{cd:"28",label:"Texas"},
{cd:"29",label:"Iowa"},
{cd:"30",label:"Wisconsin"},
{cd:"31",label:"California"},
{cd:"32",label:"Minnesota"},
{cd:"33",label:"Oregon"},
{cd:"34",label:"Kansas"},
{cd:"35",label:"West Virginia"},
{cd:"36",label:"Nevada"},
{cd:"37",label:"Nebraska"},
{cd:"38",label:"Colorado"},
{cd:"39",label:"North Dakota"},
{cd:"40",label:"South Dakota"},
{cd:"41",label:"Montana"},
{cd:"42",label:"Washington"},
{cd:"43",label:"Idaho"},
{cd:"44",label:"Wyoming"},
{cd:"45",label:"Utah"},
{cd:"46",label:"Oklahoma"},
{cd:"47",label:"New Mexico"},
{cd:"48",label:"Arizona"},
{cd:"49",label:"Alaska"},
{cd:"50",label:"Hawaii"}
];

//国コンボの生成
window.onload=function(){
for(var i=0;i<arr.length;i++){
let op = document.createElement("option");
op.value = arr[i].cd;
op.text = arr[i].label;
document.getElementById("selPref").appendChild(op);
}
}

//国が選択された時に呼び出される処理
function selPref(obj){
var targetArr;
targetArr = arrJapan;
if(obj.value == "1"){
targetArr = arrJapan;
}else if(obj.value == "2"){
targetArr = arrUSA;
}else{
targetArr = new Array();
}
var selObj = document.getElementById('selCity');
while(selObj.lastChild){
selObj.removeChild(selObj.lastChild);
}
for(var i=0;i<targetArr.length;i++){
let op = document.createElement("option");
op.value = targetArr[i].cd;
op.text = targetArr[i].label;
selObj.appendChild(op);
}
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.2

回答者： Ogre7077
回答日時：2020/11/23 09:06

フォームの配下にある要素に ID 属性があると、

その値の名前で大域変数が作成されてしまう様です。
本件では、関数名と ID 属性名が同一なので、
関数が大域変数で上書きされてしまい、連動に失敗していると考えられます。

対策案1.
関数名と ID 属性名は被らないように命名する

対策案2.
フォーム部品に ID 属性を使わない。
要素の取得は name 属性で行う。
<form name=area><select name=pref></select></form>
→ var selectElem = document.forms["area"].elements["pref"];

対策案3.
イベントの設定を onchange 属性ではなく、スクリプト中で直書きする
selectElem.addEventListener('change', function(event){
var obj = event.currentTarget;
// ...
}, false);