Js - 无法打印/获取动态选择的下拉列表的正确值

Question

Code is in JSFiddle .代码在JSFiddle中。

There are 4 drop-down input types (Year, Make, Model, and Parts).有 4 种下拉输入类型（Year、Make、Model 和 Parts）。
Year, Make and Parts are independent.年份、品牌和零件是独立的。 But the model is loaded based on what the make is.但是 model 是根据品牌加载的。 When I try to print the values in the text box, it does not show the model correctly.当我尝试打印文本框中的值时，它没有正确显示 model。 Can you please help me how to fix this?你能帮我解决这个问题吗？

Thanks so much for your time.非常感谢您的宝贵时间。

function random_function() {
    var year = document.getElementById("Year");
    var year1 = year.options[year.selectedIndex].text;
    document.getElementById("showyear").value = year1

    var a = document.getElementById("Make").value;
    if (a === "Chevrolet") {
        var arr = ["Camaro", "Impala", "Colorado", "Corvette", "Spark"];
    }
    else if (a === "Ford") {
        var arr = ["Fiesta", "Escape", "Focus", "Fusion", "Explorer"];
    }
    else if (a === "BMW") {
        var arr = ["M3", "M5", "X6", "128i", "135i"];
    }
    else if (a === "Audi") {
        var arr = ["A4", "A5", "A6", "A7", "A8"];
    }
    else if (a === "Toyota") {
        var arr = ["Camry", "Corolla", "Yaris", "Prius", "Highlander"];
    }

    var string = "";
    for (i = 0; i < arr.length; i++) {
        string = string + "<option value=" + arr[i] + ">" + arr[i] + "</option>";
    }
    document.getElementById("Model").innerHTML = string;


    var make = document.getElementById("Make");
    var make1 = make.options[make.selectedIndex].text;
    document.getElementById("showmake").value = make1;


    var model = document.getElementById("Model");
    var model1 = model.options[model.selectedIndex].text;
    document.getElementById("showmodel").value = model1;

    var parts = document.getElementById("Parts");
    var parts1 = parts.options[parts.selectedIndex].text;
    document.getElementById("showparts").value = parts1
}

Here is the HTML Code这是 HTML 代码

<html>
    <head>
        <script src = "Scripts\getmodel.js">    
        </script> 
    </head>
    <body>

        <select id="Year" onchange="random_function()">
            <option> - Select Year - </option>
            <option value="2019">2019</option>
            <option value="2018">2018</option>
            <option value="2017">2017</option>
            <option value="2016">2016</option>
            <option value="2015">2015</option>
        </select>

<br><br>

        <select id="Make" onchange="random_function()">
            <option> - Select Make - </option>
            <option value="Chevrolet">Chevrolet</option>
            <option value="Ford">Ford</option>
            <option value="BMW">BMW</option>
            <option value="Audi">Audi</option>
            <option value="Toyota">Toyota</option>
        </select>
<br><br>
        <div>
           <select  id="Model"  onchange="random_function()">
               <Option> - Select Model - </Option> 
           </select>
        </div>
<br>
        <select id="Parts"  onchange="random_function()">
            <option> - Select Parts - </option>
            <option value="Steering Wheel">Steering Wheel</option>
            <option value="Engine">Engine</option>
            <option value="Front door">Front door</option>
            <option value="Rear door">Rear door</option>
            <option value="Clutch Plate">Clutch Plate</option>
        </select>

        <br><br>  
        <input type="text" id="showyear"><br><br>  
        <input type="text" id="showmake"> <br><br> 
        <input type="text" id="showmodel"> <br><br> 
        <input type="text" id="showparts"> <br><br> 

    </body>
</html>

Answer 1

You're remaking your dropdown on every change.您正在重新制作每次更改的下拉菜单。

The user starts by selecting a year, and random_function runs.用户从选择年份开始， random_function运行。 The year is updated, a is "" so arr never gets assigned and the model dropdown innerHTML is set to "" , but it was already empty to you don't see any change.年份已更新， a为""因此arr永远不会被分配，并且 model 下拉菜单innerHTML设置为"" ，但它已经为空，您看不到任何变化。

Then the user chooses a make.然后用户选择品牌。 The year is already set, so it basically gets set to itself again, no visible change.年份已经确定了，所以它基本上又回到了自己的位置，没有明显的变化。 The options for the model are added.添加了 model 的选项。 So far so good!到目前为止，一切都很好！

But then the user chooses a model.但随后用户选择了 model。 The year gets set to itself again.这一年又开始了。 The options for the model are generated again and the innerHTML of the model dropdown is overwritten, wiping out the previous selection. model 的选项再次生成，model 下拉列表的innerHTML被覆盖，消除了先前的选择。

The short answer is that you need to split up your form processing into different functions for each input.简短的回答是，您需要将表单处理拆分为每个输入的不同功能。 That way a change to the model doesn't cause the make to overwrite the model.这样，对 model 的更改不会导致制造商覆盖 model。

Js - 无法打印/获取动态选择的下拉列表的正确值

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-12 23:06:28

Js - 无法打印/获取动态选择的下拉列表的正确值

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-12 23:06:28

解决方案1
0 已采纳 2020-08-12 23:06:28