Select 列表不更改所选项目 DHTML

Question

我开始做网站了（从0开始学习）。当然，我为我健康的无知（和我的英语水平）道歉。我有 3 个 select 按降序排列：第一个包含从数据库加载的选项列表（目前，我只从 HTML 加载）。根据选项 selected，第二个 select 将加载其选项，依此类推，直到第三个 select。问题本身是解决了，但是当你想select的选项已经加载在第2个select的时候，不要"click"就可以了。只允许你select第一个选项。这里我留下代码，看看有没有人能找到任何可能的解决方案（和很多错误^^）。

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="">
   <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()"></select>
 </div>
 <div class="">
  <span>Select the speed control</span><hr>
  <select id="speed"></select>
 </div>
</div>

问题：如何通过外部文件中的标准W3Schools调用函数("ChangeCarList" & "ChangeModelList")？非常感谢:).

Answer 1

它不起作用的原因是因为您要删除 selecting 另一个选项上的选项。您需要记住索引中的 selected 选项，如下所示。您可能需要进一步整理您的解决方案，但此解决方案将提供 select 个其他选项。请注意我建议的解决方案中的这个添加部分。

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

此处正在记住旧索引。这里的选项是select根据记住的索引编辑的，一旦你完成添加选项。

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>

Select 列表不更改所选项目 DHTML

Select list does not change selected item DHTML

html

javascript

select

dhtml

options