选择列表不改变选定的项目DHTML

Question

我开始开发网站（从0学习）。当然，我为我的健康无知道歉（和我的英语水平）。 我有3个选择降序：第一个包含从数据库加载的选项列表（现在，我只从HTML加载）。根据所选的选项，第二选择将加载其选项，等等，直到第三选择。问题本身已解决，但是当您想要选择已在第二选择中加载的选项时，请勿“点击”它们。只允许您选择第一个选项。在这里，我留下的代码，看看是否有人可以找到任何可能的解决方案（和很多错误^^）。

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>