JavaScript动态下拉列表联动失效：二级/三级下拉无法填充求助

嘿，我帮你排查出几个导致联动下拉失效的关键问题，咱们一步步来修复：

核心问题点 #

• HTML结构不完整：所有<select>标签都没有闭合，浏览器解析DOM时会出现异常，导致JS无法正确获取#make和#model元素。
• JavaScript语法错误：dataThirdSelect里的键名（比如Model 1、Model 2）包含空格，却没有用引号包裹，这会直接触发语法错误，让整个脚本停摆。
• 未处理旧选项堆积：切换下拉选项时，没有清空目标下拉框的原有选项，会导致重复添加选项，影响体验。

修正后的完整代码 #

HTML部分（修复闭合标签） #

<select id="company" name="company" class="form-control linked-dropdown" data-linked="make">
  <option value="">-- Select Product --</option>
  <option value="Product1">Product1</option>
  <option value="Product2">Product2</option>
</select>
<select id="make" name="make" class="form-control linked-dropdown" data-linked="model">
  <option value="">Choose Make</option>
</select>
<select id="model" name="model" class="form-control">
  <option value="">Choose Model</option>
</select>
<button id="clickButton">Open Document</button>

JavaScript部分（修复语法+优化逻辑） #

// 产品对应型号的映射
var dataSecondSelect = { 
  Product1: ['Model 1','Model_2','Model_3','Model_4'], 
  Product2: ['Model 5','Model_6','Model_7','Model_8'] 
};
// 带空格的键名必须用引号包裹，避免语法错误
var dataThirdSelect = { 
  'Model 1': ['Make1-1-1','Make1-1-2','Make1-1-3','Make1-1-4'], 
  'Model 2': ['Make1-2-1','Make1-2-2','Make1-2-3','Make1-2-4'], 
  'Model_3': ['Make1-3-1','Make1-3-2','Make1-3-3','Make1-3-4'] 
};

// 产品下拉切换事件
$('#company').on('change',function(){ 
  var selectedProduct = $(this).val(); 
  // 先清空品牌下拉框，保留默认提示
  $('#make').html('<option value="">Choose Make</option>');
  if(selectedProduct!==''){ 
    // 填充品牌选项
    for(var i=0;i<dataSecondSelect[selectedProduct].length;i++) { 
      $('#make').append($("<option></option>")
        .attr("value",dataSecondSelect[selectedProduct][i])
        .text(dataSecondSelect[selectedProduct][i])); 
    } 
    // 切换产品时同步清空型号下拉框
    $('#model').html('<option value="">Choose Model</option>');
  } 
});

// 品牌下拉切换事件
$('#make').on('change',function(){ 
  var selectedMake = $(this).val(); 
  // 先清空型号下拉框，保留默认提示
  $('#model').html('<option value="">Choose Model</option>');
  if(selectedMake!==''){ 
    // 填充型号选项
    for(var i=0;i<dataThirdSelect[selectedMake].length;i++){ 
      $('#model').append($("<option></option>")
        .attr("value",dataThirdSelect[selectedMake][i])
        .text(dataThirdSelect[selectedMake][i])); 
    } 
  } 
});

// 打开文档函数
function openDoc(url){ 
  window.open(url,"_blank","menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"); 
}

// 按钮点击事件
$('#clickButton').on('click',function(){ 
  var data = {}; 
  $('select').each(function(){ 
    data[this.id] = $(this).val(); 
  }); 
  // 增加空值判断，避免无效跳转
  if(data.model){
    openDoc(data.model);
  } else {
    alert('请选择完整的产品、品牌、型号信息');
  }
});

额外优化说明 #

1. 给带空格的对象键名添加引号是JS的语法要求，否则会被解析为标识符，触发错误。
2. 每次切换下拉时清空旧选项，保证下拉框内容始终是当前选择对应的最新选项。
3. 增加了跳转前的空值判断，避免用户未选完就点击按钮导致的无效操作。

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