У меня есть этот измененный скрипт, который я нашел в Интернете.
Он работает очень хорошо, чтобы иметь меню выпадающего меню с 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>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Select Two</option>
</select>
<select name='List3' onchange="fillSelect(this.value, this.form['List4'])">
<option selected >Select Three</option>
</select>
<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
Я заметил несколько ошибок из этого фрагмента.
Я бы сказал, вместо того, чтобы объявить город в Мексике "Мексикой", почему бы не объявить его "Мехико"? Из того, что я понимаю, это то, что официально признают город, и ваш код тоже это узнает. Итак, я сменил "Мексику" на город в "Мехико", и он работал отлично. Это также позволяет легче понять ваш итоговый код вашей целевой аудиторией.
Вторая ошибка, которую я заметил, заключалась в неправильном написании "Гвадалахара" в "списке 4".
Кроме того, вы получили getValue для выбора list4. Удалено и изменено на this.value. Если вам нужно захватить значение, просто вызовите его с помощью JS, если это было вашим намерением.
replace() выкинет eror, но он по-прежнему работает должным образом, так как sitll продолжает воздерживаться от добавления нескольких значений в итоговый выпадающий список (list4), если в предыдущее раскрывающееся меню (list3) добавлены изменения.
Ниже приведен правильный код.
Дайте мне знать, если это поможет!
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>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Select Two</option>
</select>
<select name='List3' onchange="fillSelect(this.value, this.form['List4'])">
<option selected >Select Three</option>
</select>
<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>