Два массива, использующих одну и ту же переменную. 2-й и 3-й выпадающий в зависимости от совершенно разных первых массивов

Я хотел создать второй массив, который зависел от значения из s1.value. Если это возможно? Могу ли я иметь два массива, зависящих от одной переменной. Я предполагал, что мог бы дублировать функцию дважды, но это, похоже, не работает. Может кто-нибудь мне помочь?

<html>
    <head>
    <script>
    function populate(s1,s2){
     var s1 = document.getElementById(s1);
     var s2 = document.getElementById(s2);
     s2.innerHTML = "";
     if(s1.value == "Chevy"){
      var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
     } else if(s1.value == "Dodge"){
      var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
     } else if(s1.value == "Ford"){
      var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
     }
     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);
     }
    }
    function populate(s0){
        var s0 = document.getElementById(s0);
        s0.innerHTML="";
        if(s1.value == "Chevy"){
            var optionArray = ["|","johnny|Johnny" , "janey|Janey", "jimmy|Jimmy" , "kiesha|Kiesha"];
        }
        for(var option in optionArray){
            var par = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newoption.innerHTML = pair[1];
            s0.options.add(newOption);
        }
    }
      
    </script>
    </head>
    <body>
    <h2>Choose Your Car</h2>
    <hr />
    Choose Car Make:
    <select id="slct1" name="slct1" onchange="populate(this.id,'slct2','slct0')">
      <option value=""></option>
      <option value="Chevy">Chevy</option>
      <option value="Dodge">Dodge</option>
      <option value="Ford">Ford</option>
    </select>
    <hr />
    Choose Car Model:
    <select id="slct2" name="slct2"></select>
    <hr />
    Choose who gets the car
    <select id="slct0" name="slct0"></select>
    </body>
    </html>

Источник

1 ответ

На самом деле вам не нужна функция заполнения (s0), попробуйте это:)

ПРИМЕЧАНИЕ: вы должны убедиться в правильности написания переменной, так как когда я запускаю ваш код, я обнаружил множество переменных с неправильным написанием.

<!DOCTYPE html>
    <html>
    <head>
    
    <script>
    function populate(s1,s2,s0){
        var s1 = document.getElementById(s1);
        var s2 = document.getElementById(s2);
        s2.innerHTML = "";
        if(s1.value == "Chevy"){
            var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
        } else if(s1.value == "Dodge"){
            var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
        } else if(s1.value == "Ford"){
            var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
        }
        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);
        }
    
    
         var s0 = document.getElementById(s0);
        s0.innerHTML="";
        if(s1.value == "Chevy"){
            var optionArray = ["|","johnny|Johnny" , "janey|Janey", "jimmy|Jimmy" , "kiesha|Kiesha"];
        }else{
         var optionArray = ["|", "someValue|Some value"];
        }
        for(var option in optionArray){
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s0.options.add(newOption);
        }
    }
    
    /*
    Function populate(s0){
        var s0 = document.getElementById(s0);
        s0.innerHTML="";
        if(s1.value == "Chevy"){
            var optionArray = ["|","johnny|Johnny" , "janey|Janey", "jimmy|Jimmy" , "kiesha|Kiesha"];
        }
        for(var option in optionArray){
            var par = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newoption.innerHTML = pair[1];
            s0.options.add(newOption);
        }
    }
    */
    </script>
    </head>
    <body>
    <h2>Choose Your Car</h2>
    <hr />
    Choose Car Make:
    <select id="slct1" name="slct1" onchange="populate(this.id,'slct2','slct0')">
      <option value=""></option>
      <option value="Chevy">Chevy</option>
      <option value="Dodge">Dodge</option>
      <option value="Ford">Ford</option>
    </select>
    <hr />
    Choose Car Model:
    <select id="slct2" name="slct2"></select>
    <hr />
    Choose who gets the car
    <select id="slct0" name="slct0"></select>
    </body>
    </html>

Источник
Другие вопросы по тегам