如何在选择另一个下拉列表中的选项后自动打开一个下拉列表？

问题描述 投票：0回答：1

在此产品上传表单中，我有五个使用 HTML 创建的级联下拉列表，并且我嵌入了 Javascript 来动态填充下拉列表中的选项。我的问题是，在第一个下拉列表中选择一个选项后，如何立即打开第二个下拉列表？那么，一旦选择了第二个下拉列表中的选项，如何让第三个下拉列表自动打开呢？之后的每个下拉列表依此类推。我知道这不能用 javascript 来完成，所以其他语言中有什么选项。这是示例代码（抱歉，如果它有点长，我尝试删除尽可能多的内容，同时仍然提供上下文）：

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Upload Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form id="upload-form" form action="Upload_product.php" method="post" enctype="multipart/form-data">
        <label for="type">Product Type:</label>
        <select id="type" name="type">
            <option value="">Select a Type</option>
            <option value="Shotgun">Shotgun</option>
            <option value="Rifle">Rifle</option>
            <option value="Air Rifle">Air Rifle</option>
            <option value="Air Pistol">Air Pistol</option>
        </select>

        <label for="action">Action:</label>
        <select id="action" name="action">
            <!-- Subcategory options will be dynamically added here -->
        </select>


    <div class="field-container">
        <label for="make">Make:</label>
        <input type="text" id="makeInput" name="make" list="makeList">
        <datalist id="makeList">
    <!-- Add options dynamically using JavaScript -->
        </datalist>



        <label for="model">Model:</label>
        <input type="text" id="modelInput" name="model" list="modelList">
        <datalist id="modelList">
        </datalist>


        <label for="variant">Variant:</label>
        <input type="text" id="variantInput" name="variant" list="variantList">
        <datalist id="variantList">
        <!-- Add options dynamically using JavaScript -->
        </datalist>


        <label id="stockLabel" for="stock">Stock Material:</label>
        <input type="text" id="stockInput" name="stock" list="stockList">
        <datalist id="stockList">
        </datalist>
    </div>
</form>
<script>

// Populate Action & Make options based on selected Product Type
    document.getElementById("type").addEventListener("change", function () {
        var type = this.value;
        var actionDropdown = document.getElementById("action");
        var makeDropdown = document.getElementById("makeList");
        var stockDropdown = document.getElementById("stockList");
        actionDropdown.innerHTML = ""; // Refresh Action when Type changes
        makeDropdown.innerHTML = ""; // Refresh Make when Type changes
        stockDropdown.innerHTML = ""; // Refresh Stock when Type changes

// Populate 'Action' and 'Make' options for Rifles
        if (type === "Rifle") {
            addOption(actionDropdown, "Select an Action");
            addOption(actionDropdown, "Bolt Action");
            addOption(actionDropdown, "Straight Pull");
            addOption(actionDropdown, "Semi Automatic");
            addOption(actionDropdown, "Single Shot");
            addOption(actionDropdown, "Pump Action");
            addOption(actionDropdown, "Lever Action");
            addOption(actionDropdown, "Over & Under");
            addOption(actionDropdown, "Side-by-side");
        

             // Populate 'Make' options for Rifles
            addOption(makeDropdown, "Select a Make");
            addOption(makeDropdown, "Accuracy International");
            addOption(makeDropdown, "Anschutz");
}

else if (type === "Shotgun") {
            addOption(actionDropdown, "Select an Action");
            addOption(actionDropdown, "Over & Under");
            addOption(actionDropdown, "Side-by-side");
            addOption(actionDropdown, "Semi Automatic");
            addOption(actionDropdown, "Single Shot");

// Populate Make options for Shotguns
            addOption(makeDropdown, "Select a Make");
            addOption(makeDropdown, "Abbiatico & Salvinelli");
}

else if (type === "Air Rifle") {
            // Populate Action options for Air Rifles
            addOption(actionDropdown, "Select an Action");
            addOption(actionDropdown, "Break Barrel - Spring");
            addOption(actionDropdown, "Break Barrel -Gas Ram");
            addOption(actionDropdown, "Pre-Charged Pneumatic (PCP)");

// Populate 'Make' options for Air Rifles
            addOption(makeDropdown, "Select a Make");
            addOption(makeDropdown, "Air Arms");
}

// Populate Action options for Air Pistols
        else if (type === "Air Pistol") {
            addOption(actionDropdown, "Select an Action");
            addOption(actionDropdown, "Break Barrel - Spring");
            addOption(actionDropdown, "Break Barrel - Gas Ram");
            addOption(actionDropdown, "Pre-Charged Pneumatic (PCP)");
            addOption(actionDropdown, "Pneumatic");

// Populate 'Make' options for Air Pistols
            addOption(makeDropdown, "Select a Make");
            addOption(makeDropdown, "Artemis");
}
        });

        function addOption(selectElement, optionText) {
        var option = document.createElement("option");
        option.text = optionText;
        selectElement.appendChild(option);
        }

// Populate Model options based on selected Make
    document.getElementById("type").addEventListener("change", updateModels);
    document.getElementById("makeInput").addEventListener("change", updateModels);
    function updateModels() {
    var type = document.getElementById("type").value;
    var make = document.getElementById("makeInput").value;
    var modelDropdown = document.getElementById("modelList");
    modelDropdown.innerHTML = ""; // Refresh Model when Make changes


    if (type && make) { // Check if both type and make are selected
    switch (type) {
        case "Rifle":
            populateRifleModels(make, modelDropdown);
            break;
        case "Shotgun":
            populateShotgunModels(make, modelDropdown);
            break;
        case "Air Rifle":
            populateAirRifleModels(make, modelDropdown);
            break;
        case "Air Pistol":
            populateAirPistolModels(make, modelDropdown);
            break;
    }
}
}

        //Shotguns
        function populateShotgunModels(make, modelDropdown) {
        switch (make) {
    case "Abbiatico & Salvinelli":
        addOption(modelDropdown, "Dove");
    break;

case "Beretta":
            addOption(modelDropdown, "686");
            addOption(modelDropdown, "687");
break;
}
}

//Rifles
        function populateRifleModels(make, modelDropdown) {

    switch (make) {
         case "Accuracy International":
            addOption(modelDropdown, "AE");
break;
         case "Anschutz":
            addOption(modelDropdown, "1416");
break;
}
}

//Air Rifles

            function populateAirRifleModels(make, modelDropdown) {
// Populate Air Rifle model options based on the selected make
switch (make) {
        case "Air Arms":
            addOption(modelDropdown, "EV2 Mk1");
        break;
       }
     }

//Air Pistols
           function populateAirPistolModels(make, modelDropdown) {
           // Populate Air Pistol model options based on the selected make
switch (make) {
        case "Artemis":
            addOption(modelDropdown, "CP2");
        break;
      }
   }

function addOption(selectElement, optionText) {
        var option = document.createElement("option");
        option.text = optionText;
        selectElement.appendChild(option);
        }

// Populate Variant options based on selected Make + Model
    document.getElementById("makeInput").addEventListener("change", updateVariant);
    document.getElementById("modelInput").addEventListener("change", updateVariant);
    document.getElementById("variantInput").addEventListener("change", updateVariant);

    function updateVariant() {
    var make = document.getElementById("makeInput").value;
    var model = document.getElementById("modelInput").value;
    var variantDropdown = document.getElementById("variantList");
    variantDropdown.innerHTML = ""; // Refresh Model when Make changes

    if (make && model) { // Check if both type and make are selected
    switch (make) {
        case "Accuracy International":
            populateAccuracyInternationalVariants(model, variantDropdown);
        break;
        case "Artemis":
            populateArtemisVariants(model, variantDropdown);
        break;
        case "Anschutz":
            populateAnschutzVariants(model, variantDropdown);
        break;
        case "Beretta":
            populateBerettaVariants(model, variantDropdown);
        break;
        case "Abbiatico & Salvinelli":
            populateAbbiaticoandSalvinelliVariants(model, variantDropdown);
        break;
        case "Air Arms":
            populateAirArmsVariants(model, variantDropdown);
        break;
     }
 }
}

//GUN VARIANT OPTIONS
        function populateAccuracyInternationalVariants(model, variantDropdown) {
           switch (model) {
            case "AE":
            addOption(variantDropdown, "Black");
            addOption(variantDropdown, "Blue");
            addOption(variantDropdown, "Flat Dark Earth");
            break;
     }
}

            
               function populateAnschutzVariants(model, variantDropdown) {
               switch (model) {
                case "1416":
                addOption(variantDropdown, "Classic");
                addOption(variantDropdown, "Classic Light");
                addOption(variantDropdown, "HB");
                break;
               }
            }

          
            function populateAirArmsVariants(model, variantDropdown) {
               switch (model) {
                case "EV2 Mk1":
                addOption(variantDropdown, "Grey");
                addOption(variantDropdown, "Black");
                addOption(variantDropdown, "Wood");
                break;
               }
            }

            function populateArtemisVariants(model, variantDropdown) {
           switch (model) {
            case "CP2":
            addOption(variantDropdown, "Red");
            addOption(variantDropdown, "Blue");
            addOption(variantDropdown, "Flat Dark Earth");
            break;
     }
}

function populateBerettaVariants(model, variantDropdown) {
           switch (model) {
            case "686":
            addOption(variantDropdown, "Long");
            addOption(variantDropdown, "Short");
            addOption(variantDropdown, "Double");
            break;
            case "682":
            addOption(variantDropdown, "Long");
            addOption(variantDropdown, "Short");
            addOption(variantDropdown, "Double");
            break;
     }
}

function populateAbbiaticoandSalvinelliVariants(model, variantDropdown) {
           switch (model) {
            case "Dove":
            addOption(variantDropdown, "Red");
            addOption(variantDropdown, "Blue");
            addOption(variantDropdown, "Flat Dark Earth");
            break;
     }
}



function addOption(selectElement, optionText) {
        var option = document.createElement("option");
        option.text = optionText;
        selectElement.appendChild(option);
        }


// POPULATE STOCK MATERIAL OPTIONS
    document.getElementById("type").addEventListener("change", updateStock);
    document.getElementById("stockInput").addEventListener("change", updateStock);

    function updateStock() {
    var type = this.value;
    var stockDropdown = document.getElementById("stockList");
    stockDropdown.innerHTML = ""; // Refresh Model when Make changes

if (type === "Rifle") {
        addOption(stockDropdown, "Synthetic");
        addOption(stockDropdown, "Synthetic - Black");
        addOption(stockDropdown, "Synthetic - Camo");
}
if (type === "Shotgun") {
        addOption(stockDropdown, "Synthetic");
        addOption(stockDropdown, "Synthetic - Black");
        addOption(stockDropdown, "Synthetic - Camo");
}
if (type === "Air Rifle") {
        addOption(stockDropdown, "Synthetic");
        addOption(stockDropdown, "Synthetic - Black");
        addOption(stockDropdown, "Synthetic - Camo");
}
if (type === "Air Pistol") {
        addOption(stockDropdown, "Synthetic");
        addOption(stockDropdown, "Synthetic - Black");
        addOption(stockDropdown, "Synthetic - Camo");
}
}

function addOption(selectElement, optionText) {
        var option = document.createElement("option");
        option.text = optionText;
        selectElement.appendChild(option);
        }


</script>

</body>
</html>

非常感谢您的建议。

html forms select dropdown
1个回答
0
投票

像 select2 这样的库，看起来像一个下拉菜单，但它们使用 div 并在后台选择。用户永远不会看到选择。在视觉上他总是看到div。你可以用那个试试。我想这对你会有用。

这里是Select2的自定义打开和关闭方法： 链接

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.