时间戳

首页 > 解决方案 > Js - 无法打印/获取动态选择的下拉列表的正确值

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

问题描述

代码在JSFiddle中。

有 4 种下拉输入类型（年份、品牌、型号和零件）。
年份、品牌和零件是独立的。但是模型是根据品牌加载的。当我尝试在文本框中打印值时，它没有正确显示模型。你能帮我解决这个问题吗？

非常感谢您的宝贵时间。

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
}

这是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>

标签： javascripthtml

解决方案

您正在重新制作每次更改的下拉菜单。

用户从选择年份开始，然后random_function运行。年份已更新，因此a永远不会被分配，并且模型下拉列表设置为，但它已经为空，您看不到任何变化。""arrinnerHTML""

然后用户选择品牌。年份已经确定了，所以它基本上又回到了自己的位置，没有明显的变化。添加了模型的选项。到目前为止，一切都很好！

但随后用户选择了一个模型。这一年又开始了。模型的选项再次生成，innerHTML模型下拉列表的 被覆盖，清除先前的选择。

简短的回答是，您需要将表单处理拆分为每个输入的不同功能。这样，对模型的更改不会导致制造商覆盖模型。

推荐阅读