如何使用jQuery根据一个下拉框选中值改变另一个下拉框的值？

没问题，这是个很常见的表单联动需求，我给你整理了一个清晰的jQuery实现方案：

核心思路 #

监听第一个下拉框（#Test1）的选中变化事件，获取选中值后，遍历第二个下拉框（#selectfilter）的所有选项，将其中的#ReplaceThisText#标记替换为选中的值。

完整代码实现 #

// 等待DOM加载完成后执行
$(document).ready(function() {
  // 绑定Test1下拉框的change事件
  $('#Test1').on('change', function() {
    // 获取当前选中的value值（如果需要显示选项文本，改用$(this).find('option:selected').text()）
    const selectedValue = $(this).val();
    
    // 遍历selectfilter的所有选项，替换标记文本
    $('#selectfilter option').each(function() {
      const originalContent = $(this).text();
      // 替换#ReplaceThisText#为选中值，空选时用空字符串替代
      const updatedContent = originalContent.replace('#ReplaceThisText#', selectedValue || '');
      $(this).text(updatedContent);
    });
  });

  // 页面初始化时触发一次change事件，确保初始状态匹配
  $('#Test1').trigger('change');
});

代码说明 #

• $(document).ready()：确保DOM元素完全加载后再执行代码，避免出现找不到元素的报错。
• $('#Test1').on('change', ...)：监听下拉框的选中切换事件，用户每选一次新选项就触发一次逻辑。
• 关于选中值的选择：如果需要用选项显示的文本（比如"One"/"Two"），把$(this).val()改成$(this).find('option:selected').text()即可。
• $('#selectfilter option').each()：逐个处理第二个下拉框的所有选项，保证所有包含#ReplaceThisText#的位置都被替换。
• selectedValue || ''：处理第一个下拉框选中默认空选项的情况，避免标记被替换成undefined。
• trigger('change')：页面刚加载时主动触发一次change事件，让第二个下拉框的内容初始就和第一个下拉框的选中状态对齐。

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