JavaScript级联下拉菜单问题：VM Size关联CPU/内存/磁盘选项

问题描述 #

作为JavaScript新手，我尝试创建级联下拉菜单，现有代码可运行但未达预期效果：

• 当前选择VM Size后，CPU下拉框会显示CPU、Memory、Disk类别，需后续操作才展示对应规格
• 期望选择VM Size后，CPU、Memory、Disk下拉框直接展示该VM Size对应的具体规格选项，例如选择Medium时：
  • CPU显示2CPU
  • Memory显示8GB、16GB
  • Disk显示50GB、100GB、200GB

修改后的代码 #

JavaScript代码

var vmObject = {
    "Small": {
        "CPU": ["1CPU"],
        "Memory": [".5GB", "1GB", "3.5GB"],
        "Disk": ["50GB", "100GB", "200GB"]
    },
    "Medium": {
        "CPU": ["2CPU"],
        "Memory": ["8GB", "16GB"],
        "Disk": ["50GB", "100GB", "200GB"]
    }
}

window.onload = function() {
    var vmSel = document.getElementById("vmSize");
    var cpuSel = document.getElementById("cpuSize");
    var memorySel = document.getElementById("memSize");
    var diskSel  = document.getElementById("diskSize");

    // 初始化VM Size选项
    for (var x in vmObject) {
        vmSel.options[vmSel.options.length] = new Option(x, x);
    }

    // VM Size选择变化时更新所有下拉框
    vmSel.onchange = function() {
        var selectedVm = vmObject[this.value];
        if (!selectedVm) {
            // 重置所有下拉框为初始提示
            resetSelect(cpuSel, "Please select VM size first");
            resetSelect(memorySel, "Please select VM size first");
            resetSelect(diskSel, "Please select VM size first");
            return;
        }

        // 更新CPU下拉框
        updateSelect(cpuSel, selectedVm.CPU);
        // 更新Memory下拉框
        updateSelect(memorySel, selectedVm.Memory);
        // 更新Disk下拉框
        updateSelect(diskSel, selectedVm.Disk);
    }

    // 重置下拉框的通用函数
    function resetSelect(selectElement, placeholderText) {
        selectElement.length = 1;
        selectElement.options[0].text = placeholderText;
    }

    // 更新下拉框选项的通用函数
    function updateSelect(selectElement, optionsArray) {
        selectElement.length = 0;
        optionsArray.forEach(function(option) {
            selectElement.options[selectElement.options.length] = new Option(option, option);
        });
    }
}

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='script.js'></script>
</head>   
<body>

<h1>Compute Dropdown Example</h1>

<form name="form1" id="form1">
VM Size: <select name="vmSize" id="vmSize">
    <option value="" selected="selected">Select VM Size</option>
  </select>
  <br><br>
CPU: <select name="cpuSize" id="cpuSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
Memory: <select name="memSize" id="memSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
Disk: <select name="diskSize" id="diskSize">
    <option value="" selected="selected">Please select VM size first</option>
  </select>
  <br><br>
</form>

</body>
</html>

关键修改说明 #

1. 移除多余层级跳转：原代码通过CPU下拉框的change事件更新Memory，现在直接在VM Size的change事件中一次性更新三个下拉框，省去中间选择步骤
2. 新增通用函数：
   • resetSelect：统一处理下拉框重置逻辑，恢复初始提示文本
   • updateSelect：批量填充下拉选项，减少重复代码
3. 直接读取对应规格：选择VM Size后，直接从vmObject中取出该型号对应的CPU、Memory、Disk数组，直接填充到各自的下拉框中

内容的提问来源于stack exchange，提问作者Pavel