HTML实现CPU三级联动下拉及参数自动填充功能开发求助

一、Excel数据转JSON格式 #

首先先整理Excel数据结构：将数据透视表转换为普通明细表格，每一行对应一个唯一CPU型号，列按顺序设置为：品牌、CPU系列、具体型号、代号、主频、核心数、线程数、支持内存规格，确保无空行空值。
转换为JSON可选用以下两种方式：

• 高版本Excel（Office 365/2021）：选中全部有效数据，使用=TOJSON()函数直接生成JSON字符串，稍作嵌套结构调整即可使用。
• 低版本Excel：将表格另存为CSV格式，使用通用CSV转JSON工具转换后，按照如下嵌套结构整理即可：

var _data = {
  "Intel": {
    "Core i7": {
      "7700": {
        "codename": "Kaby Lake",
        "frequency": "3.6GHz",
        "cores": 4,
        "threads": 8,
        "memory": "DDR4-2400/DDR3L-1600"
      },
      "8700": {
        "codename": "Coffee Lake",
        "frequency": "3.2GHz",
        "cores": 6,
        "threads": 12,
        "memory": "DDR4-2666"
      }
      // 剩余Intel Core i7型号按相同格式补充
    },
    "Core i3": {
      "9300": {
        // 对应参数
      }
      // 剩余Core i3型号补充
    }
    // 其余Intel系列按相同结构补充
  },
  "AMD": {
    // 结构与Intel完全一致，补充AMD全系列数据即可
  }
}

二、三级联动+参数自动填充实现 #

HTML调整 #

给后续需要自动填充的5个下拉框新增auto-field类，方便批量重置，示例如下：

<select class="form-control auto-field" id="codename-autoselect">
  <option value="">Auto Selected</option>
  <!-- 可提前把所有可能的参数值列在option中，参数较少时该方式更简便 -->
</select>

其余4个自动填充下拉框（主频、核心数、线程数、内存）按同样方式添加auto-field类即可。

JS代码替换 #

将原有JS代码全部替换为以下内容：

// 第一级：品牌选择联动加载CPU系列
$('#env-select').on('change', function(e) {
  const brand = $.trim($(this).val()),
    $familySelect = $('#family-select'),
    $processorSelect = $('#processor-select');
  // 清空所有下级选项和自动填充字段
  $familySelect.empty();
  $processorSelect.empty();
  $('.auto-field').val('').find('option:first').prop('selected', true);

  if (!_data[brand]) return;
  $('<option value="">-- Select --</option>').appendTo($familySelect);
  $.each(_data[brand], function(familyName) {
    $(`<option value="${familyName}">${familyName}</option>`).appendTo($familySelect);
  });
});

// 第二级：CPU系列选择联动加载具体型号
$('#family-select').on('change', function(e) {
  const brand = $.trim($('#env-select').val()),
    family = $.trim($(this).val()),
    $processorSelect = $('#processor-select');
  // 清空下级选项和自动填充字段
  $processorSelect.empty();
  $('.auto-field').val('').find('option:first').prop('selected', true);

  if (!brand || !family || !_data[brand][family]) return;
  $('<option value="">-- Select --</option>').appendTo($processorSelect);
  $.each(_data[brand][family], function(processorName) {
    $(`<option value="${processorName}">${processorName}</option>`).appendTo($processorSelect);
  });
});

// 第三级：具体型号选择后自动填充所有参数
$('#processor-select').on('change', function(e) {
  const brand = $.trim($('#env-select').val()),
    family = $.trim($('#family-select').val()),
    processor = $.trim($(this).val());
  
  if (!brand || !family || !processor) return;
  const cpuParams = _data[brand][family][processor];
  // 逐个填充对应参数
  $('#codename-autoselect').val(cpuParams.codename);
  $('#frequency').val(cpuParams.frequency);
  $('#cpu-cores').val(cpuParams.cores);
  $('#cpu-threads').val(cpuParams.threads);
  $('#cpu-memory').val(cpuParams.memory);
});

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