リストを選択しても選択された項目は変更されませんDHTML

Question

私はウェブサイトを開発し始めています（0から学ぶ）。もちろん、私は健康な無知について謝罪します（と私の英語レベル）。 私は3つの降順で選択しています：最初の1つは、データベースから読み込まれるオプションのリストを含んでいます（今のところ、私はHTMLから読み込みます）。選択したオプションに応じて、2番目の選択肢にはオプションがロードされ、3番目の選択まで続きます。問題自体は解決されますが、2番目の選択項目に既にロードされているオプションを選択する場合は、その項目を「クリック」しないでください。最初のオプションのみを選択することができます。ここでは誰でも可能な解決策が見つかるかどうかを確認するコードを残しています（と多くのエラー^^）。

var carsAndModels = {}; 
 
carsAndModels['Volvo'] = ['V70', 'XC60']; 
 
carsAndModels['Volkswagen'] = ['Golf', 'Polo']; 
 
carsAndModels['BMW'] = ['M6', 'X5']; 
 
    
 
var speedsAndModels = {}; 
 
speedsAndModels['V70'] = ['150km/h', '180km/h']; 
 
speedsAndModels['XC60'] = ['160km/h', '190km/h']; 
 
speedsAndModels['Golf'] = ['170km/h', '190km/h']; 
 
speedsAndModels['Polo'] = ['180km/h', '200km/h']; 
 
speedsAndModels['M6'] = ['190km/h', '2000km/h']; 
 
speedsAndModels['X5'] = ['200km/h', '210km/h']; 
 
    
 
function ChangeCarList() { 
 
    var carList = document.getElementById('car'); 
 
    var modelList = document.getElementById('carmodel'); 
 
    var speedList = document.getElementById('speed'); 
 
    var selCar = carList.options[carList.selectedIndex].value; 
 
    while (modelList.options.length) { 
 
    modelList.remove(0); 
 
    speedList.remove(0); 
 
    } 
 
    var cars = carsAndModels[selCar]; 
 
    if (cars) { 
 
    for (i = 0; i < cars.length; i++) { 
 
     var car = new Option(cars[i], i+1); 
 
     modelList.options.add(car); 
 
    } 
 
    } 
 
    ChangeModelList(); 
 
} 
 
function ChangeModelList() { 
 
    var modelListM = document.getElementById('carmodel'); 
 
    var speedListM = document.getElementById('speed'); 
 
    var indMod = modelListM.selectedIndex; 
 
    var selMod = modelListM.options[indMod].text; 
 
    while (speedListM.options.length) { 
 
    speedListM.remove(0); 
 
    } 
 
    var speeds = speedsAndModels[selMod]; 
 
    if (speeds) { 
 
    for (i = 0; i < speeds.length; i++) { 
 
     var speed = new Option(speeds[i], i+1); 
 
     speedListM.options.add(speed); 
 
    } 
 
    } 
 
}

<div class=""> 
 
    <div class=""> 
 
\t <span>Select the brand</span><hr> 
 
\t \t <select id="car" onchange="ChangeCarList()"> 
 
\t \t <option value="">-- Select --</option> 
 
\t \t \t <option value="Volvo">Volvo</option> 
 
\t \t \t <option value="Volkswagen">Volkswagen</option> 
 
\t \t \t <option value="BMW">BMW</option> 
 
\t \t </select> 
 
\t </div> 
 
\t <div class=""> 
 
\t \t <span>Select the model</span><hr> 
 
\t \t <select id="carmodel" onchange="ChangeCarList()"></select> 
 
\t </div> 
 
\t <div class=""> 
 
\t \t <span>Select the speed control</span><hr> 
 
\t \t <select id="speed"></select> 
 
\t </div> 
 
</div>

質問：外部ファイルに標準W3Schoolsの通じ機能（ "ChangeCarList" & "ChangeModelList"）を呼び出す方法？ ありがとうございました:)。

Answer 1

別のオプションを選択する際にオプションを削除するためです。あなたは以下のようにインデックスで選択されたオプションを覚えておく必要があります。ソリューションをさらに整理する必要があるかもしれませんが、このソリューションでは他のオプションを選択できます。 私が提案する解決策では、この追加された部分に注目してください。

var index; 
    if (value) { 
    index = modelList.selectedIndex; 
    } 

ここで古いインデックスが記憶されています。ここでオプションを追加すると、記憶されたインデックスに基づいてオプションが選択されます。

modelList.selectedIndex = index;//<----This also is required 

var carsAndModels = {}; 
 
carsAndModels['Volvo'] = ['V70', 'XC60']; 
 
carsAndModels['Volkswagen'] = ['Golf', 'Polo']; 
 
carsAndModels['BMW'] = ['M6', 'X5']; 
 

 
var speedsAndModels = {}; 
 
speedsAndModels['V70'] = ['150km/h', '180km/h']; 
 
speedsAndModels['XC60'] = ['160km/h', '190km/h']; 
 
speedsAndModels['Golf'] = ['170km/h', '190km/h']; 
 
speedsAndModels['Polo'] = ['180km/h', '200km/h']; 
 
speedsAndModels['M6'] = ['190km/h', '2000km/h']; 
 
speedsAndModels['X5'] = ['200km/h', '210km/h']; 
 

 
function ChangeCarList(value) { 
 
    var carList = document.getElementById('car'); 
 
    var modelList = document.getElementById('carmodel'); 
 
    var speedList = document.getElementById('speed'); 
 
    var selCar = carList.options[carList.selectedIndex].value; 
 
    var index; 
 
    if (value) { 
 
    index = modelList.selectedIndex; 
 
    } 
 
    while (modelList.options.length) { 
 
    modelList.remove(0); 
 
    speedList.remove(0); 
 
    } 
 
    var cars = carsAndModels[selCar]; 
 
    if (cars) { 
 
    for (i = 0; i < cars.length; i++) { 
 
     var car = new Option(cars[i], i + 1); 
 
     modelList.options.add(car); 
 
    } 
 
    } 
 
    modelList.selectedIndex = index; 
 
    ChangeModelList(); 
 
} 
 

 
function ChangeModelList() { 
 
    var modelListM = document.getElementById('carmodel'); 
 
    var speedListM = document.getElementById('speed'); 
 
    var indMod = modelListM.selectedIndex; 
 
    var selMod = modelListM.options[indMod].text; 
 
    while (speedListM.options.length) { 
 
    speedListM.remove(0); 
 
    } 
 
    var speeds = speedsAndModels[selMod]; 
 
    if (speeds) { 
 
    for (i = 0; i < speeds.length; i++) { 
 
     var speed = new Option(speeds[i], i + 1); 
 
     speedListM.options.add(speed); 
 
    } 
 
    } 
 
}

<div class=""> 
 
    <div class=""> 
 
    <span>Select the brand</span> 
 
    <hr> 
 
    <select id="car" onchange="ChangeCarList()"> 
 
      <option value="">-- Select --</option> 
 
      <option value="Volvo">Volvo</option> 
 
      <option value="Volkswagen">Volkswagen</option> 
 
      <option value="BMW">BMW</option> 
 
     </select> 
 
    </div> 
 
    <div class=""> 
 
    <span>Select the model</span> 
 
    <hr> 
 
    <select id="carmodel" onchange="ChangeCarList(this.value)"></select> 
 
    </div> 
 
    <div class=""> 
 
    <span>Select the speed control</span> 
 
    <hr> 
 
    <select id="speed"></select> 
 
    </div> 
 
</div>