Блог

Я пытаюсь вставить два выпадающих списка на свой веб-сайт, где выбранный параметр в первом выпадающем списке влияет на параметры во втором выпадающем списке. Я не могу понять, почему это не будет работать, поскольку, когда я нажимаю «Car» в опции 1, это не влияет на параметры во втором выпадающем списке, а не на выборку соответствующих данных.

 < script type = "text/javascript" >
  function populate(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = " ";
    if (s1.value = "Car") {
      var optionArray = ["|", "honda|Honda", "bmw|Bmw", "fiat|Fiat"];
    }
    for (var option in optionArray) {
      var pair = optionArray[option].split("|");
      var newOption = document.createElement("option");
      newOption.value = pair[0];
      newOption.innerHTML = pair[1];
      S2.options.add(newOption);
    }
  } <
  /script>
 

 <form action="https://www.carlink.co.uk/products.php">
  <select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2')">
    <option disabled selected="Vehicle Type">Vehicle Type</option>
    <option value="Car">Car</option>
    <option value="Van">Shotgun</option>
    <option value="Bike">Air rifle</option>
    <option value="Train">Air pistol</option>
  </select>


  <select name="slct 2" id="slct 2">
    <option disabled selected="make">Make</option>
  </select>
 

Я протестировал ваш код в JS Fiddle, и консоль регистрирует ошибку:

Uncaught ReferenceError: S2 is not defined

Ваш S2.options... должен быть s2.options...

Легко исправить!

Попробуйте это. У вас было несколько ошибок в вашем коде. Вам также следует попробовать использовать 3D-массив вместо | последующего разделения.

 function populate(s1, s2) {
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  
  if (s1.value == "Car") {
    var optionArray = [["", ""], ["honda", "Honda"], ["bmw","Bmw"], ["fiat", "Fiat"]];
  }
  
  s2.innerHTML = "";
  
  for (let option in optionArray) {
    var newOption = document.createElement("option");
    newOption.value = optionArray[option][0];
    newOption.innerHTML = optionArray[option][1];
    s2.options.add(newOption);
  }
} 

 <form action="https://www.carlink.co.uk/products.php">
  <select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2')">
    <option disabled selected="Vehicle Type">Vehicle Type</option>
    <option value="Car">Car</option>
    <option value="Van">Shotgun</option>
    <option value="Bike">Air rifle</option>
    <option value="Train">Air pistol</option>
  </select>


  <select name="slct 2" id="slct 2">
    <option disabled selected="make">Make</option>
  </select>
</form> 

В вашем коде есть 2 основные проблемы

• 1. Вместо использования нижнего регистра s2 вы получаете доступ S2.options
• 2. Вы используете s1.value = "Car" , который просто недопустим, он не сравнивается s1.value с "Car" тем, что вы должны использовать == === оператор (ы) or

Вот рабочая версия

 function populate(s1, s2) {
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  s2.innerHTML = " ";
  if (s1.value == "Car") { // You were using = instead of ==
    var optionArray = ["|", "honda|Honda", "bmw|Bmw", "fiat|Fiat"];
  }
  for (var option in optionArray) {
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption); // Here you are using S2
  }
}  

 <form action="https://www.carlink.co.uk/products.php">
  <select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2')">
    <option disabled selected="Vehicle Type">Vehicle Type</option>
    <option value="Car">Car</option>
    <option value="Van">Shotgun</option>
    <option value="Bike">Air rifle</option>
    <option value="Train">Air pistol</option>
  </select>


  <select name="slct 2" id="slct 2">
    <option disabled selected="make">Make</option>
  </select>