4レベルの同一選択でのドロップダウン

Question

私はオンラインで見つかったこの変更されたスクリプトを持っています。

これは、4つの可能性を持つドロップダウン選択メニューを持つのに非常に効果的です。

ここに問題があります。メキシコとメキシコのメキシコ（メキシコとメキシコ）のメニューが同じであれば、正しく動作しません。

どうすれば修正できますか？手伝ってくれてありがとう！

var categories = []; 
 

 
// list1 
 

 
categories["startList"] = ["America","Europe"] 
 

 
// list2 
 

 
categories["America"] = ["USA","Mexico"]; 
 
categories["Europe"] = ["France","UK"]; 
 

 
// list3 
 

 
categories["USA"] = ["New York","Texas"];; 
 
categories["Mexico"] = ["Mexico","Guadalajara"]; 
 
categories["France"] = ["Alsace","Normandie"]; 
 
categories["UK"] = ["Wales", "Scotland", "England"]; 
 

 
// list4 
 

 
categories["New York"] = ["Manhattan","Brooklyn","Harlem","Queens"]; 
 
categories["Texas"] = ["Dallas","Eagle Pass"]; 
 

 
categories["Mexico"] = ["DF"]; 
 
categories["Guadalaraja"] = ["East","West"]; 
 

 
categories["Alsace"] = ["Strasbourg","Kronenbourg"]; 
 
categories["Normandie"] = ["Caen","Saint-Malo","Saint-Pierre","Saint-Jean"]; 
 

 
categories["Wales"] = ["Cardiff", "New Port"]; 
 
categories["Scotland"] = ["Edimbourg"]; 
 
categories["England"] = ["London","Manchester","Exeter","Dover"]; 
 

 

 

 
var nLists = 4; // number of select lists in the set 
 

 
function fillSelect(currCat,currList){ 
 
var step = Number(currList.name.replace(/\D/g,"")); 
 
for (i=step; i<nLists+1; i++) { 
 
document.forms['tripleplay']['List'+i].length = 1; 
 
document.forms['tripleplay']['List'+i].selectedIndex = 0; 
 
} 
 
var nCat = categories[currCat]; 
 
for (each in nCat) { 
 
var nOption = document.createElement('option'); 
 
var nData = document.createTextNode(nCat[each]); 
 
nOption.setAttribute('value',nCat[each]); 
 
nOption.appendChild(nData); 
 
currList.appendChild(nOption); 
 
} 
 
} 
 

 
function init() { 
 
fillSelect('startList',document.forms['tripleplay']['List1']) 
 
} 
 

 
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

<form name="tripleplay" action=""> 
 
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])"> 
 
<option selected>Select One</option> 
 
</select> 
 
&nbsp; 
 
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])"> 
 
<option selected>Select Two</option> 
 
</select> 
 
&nbsp; 
 
<select name='List3' onchange="fillSelect(this.value, this.form['List4'])"> 
 
<option selected >Select Three</option> 
 
</select> 
 
&nbsp; 
 
<select name='List4' onchange="getValue(this.value, this.form['List3'].value, this.form['List2'].value, 
 
this.form['List1'].value)"> 
 
<option selected >Select Four</option> 
 
</select> 
 
</form>

https://jsfiddle.net/nbz9atmv/とhttps://www.sitepoint.com/community/t/country-state-city-dropdown-list/2438

Answer 1

のオリジナル適応私はこのスニペットからいくつかのエラーに気づきました。

メキシコの都市を「メキシコ」と宣言する代わりに、「メキシコの都市」と宣言してみませんか？私が理解していることから、これは都市が正式に認識されているものであり、あなたのコードもこれを認識します。だから、私は 'メキシコ'の都市を 'メキシコシティ'に変更しました。これにより、結果として得られるコードをターゲットオーディエンスがより簡単に理解できるようになります。

私が気づいた2番目のエラーは、「Guadalajara」が「リスト4」に間違って綴られていたことでした。

また、list4 selectにはgetValueがあります。削除されthis.valueに変更されました。値をつかむ必要がある場合は、JSを使用してIDを呼び出します。

replace（）はerorをスローしますが、以前のドロップダウン（list3）に変更が加えられた場合は、最後のドロップダウン（list4）に複数の値が追加されるのをやめます。

以下は正しく動作するコードです。

はこれが助けたなら、私を知ってみましょう！

var categories = []; 
 

 
// list1 
 

 
categories["startList"] = ["America","Europe"] 
 

 
// list2 
 

 
categories["America"] = ["USA","Mexico"]; 
 
categories["Europe"] = ["France","UK"]; 
 

 
// list3 
 

 
categories["USA"] = ["New York","Texas"];; 
 
categories["Mexico"] = ["Mexico City","Guadalajara"]; 
 
categories["France"] = ["Alsace","Normandy"]; 
 
categories["UK"] = ["Wales", "Scotland", "England"]; 
 

 
// list4 
 

 
categories["New York"] = ["Manhattan","Brooklyn","Harlem","Queens"]; 
 
categories["Texas"] = ["Dallas","Eagle Pass"]; 
 

 
categories["Mexico City"] = ["DF"]; 
 
categories["Guadalajara"] = ["East","West"]; 
 

 
categories["Alsace"] = ["Strasbourg","Kronenbourg"]; 
 
categories["Normandy"] = ["Caen","Saint-Malo","Saint-Pierre","Saint-Jean"]; 
 

 
categories["Wales"] = ["Cardiff", "New Port"]; 
 
categories["Scotland"] = ["Edimbourg"]; 
 
categories["England"] = ["London","Manchester","Exeter","Dover"]; 
 

 

 

 
var nLists = 4; // number of select lists in the set 
 

 
function fillSelect(currCat,currList){ 
 
var step = Number(currList.name.replace(/\D/g,"")); 
 

 
for (i=step; i<nLists+1; i++) { 
 
document.forms['tripleplay']['List'+i].length = 1; 
 
document.forms['tripleplay']['List'+i].selectedIndex = 0; 
 
} 
 
var nCat = categories[currCat]; 
 
for (each in nCat) { 
 
var nOption = document.createElement('option'); 
 
var nData = document.createTextNode(nCat[each]); 
 
nOption.setAttribute('value',nCat[each]); 
 
nOption.appendChild(nData); 
 
currList.appendChild(nOption); 
 
} 
 
} 
 

 
function init() { 
 
fillSelect('startList',document.forms['tripleplay']['List1']) 
 
} 
 

 
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

<form name="tripleplay" action=""> 
 
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])"> 
 
<option selected>Select One</option> 
 
</select> 
 
&nbsp; 
 
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])"> 
 
<option selected>Select Two</option> 
 
</select> 
 
&nbsp; 
 
<select name='List3' onchange="fillSelect(this.value, this.form['List4'])"> 
 
<option selected >Select Three</option> 
 
</select> 
 
&nbsp; 
 
<select name='List4' onchange="fillSelect(this.value, this.form['List3'].value, this.form['List2'].value, 
 
this.form['List1'].value)"> 
 
<option selected >Select Four</option> 
 
</select> 
 
</form>