Select Box联动异常：选中B类选项时Select Box2未显示全部匹配项

原代码存在两个核心问题，导致无法显示所有符合条件的选项：

1. 匹配逻辑错误：你用option[value^="..."]匹配的是选项的value属性前缀，但需求是匹配选项的显示文本前缀，两者完全不对应。比如select1选中"B"时，其value是"1"，而select2中符合条件的选项value是"1"和"2"，用value前缀匹配只会命中value以"1"开头的项，自然只能显示一个。
2. 浏览器兼容性问题：直接对<option>调用hide()/show()在部分浏览器中表现异常，因为浏览器对select元素内的option样式支持有限。

修正方案一：缓存选项+动态筛选填充（兼容性最优） #

提前缓存select2的所有原始选项，根据选中的文本前缀动态筛选后重新填充，彻底避免样式兼容性问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="standard" size="1" id="select1">
  <option value="0">A</option>
  <option value="1">B</option>
  <option value="2">C</option>
  <option value="3">D</option>
  <option value="4">E</option>
  <option value="5">F</option>
  <option value="6">G</option>
  <option value="7">H</option>
  <option value="8">I</option>
  <option value="9">J</option>
  <option value="10">K</option>
  <option value="11">L</option>
  <option value="12">M</option>
</select>

<select name="standard" size="1" id="select2">
  <option value="0">Aal in Aspik</option>
  <option value="1">Bierwurst</option>
  <option value="2">Berliner (Faschingskrapfen)</option>
  <option value="3">Auberginenröllchen auf Tomaten-Zimt-Sugo</option>
</select>

// 缓存select2的所有原始选项，避免重复DOM操作
const select2OriginalOptions = $('#select2 option').clone();

$('#select1').on('change', function() {
  // 获取select1选中的显示文本（而非value）
  const targetPrefix = $(this).find('option:selected').text().trim();
  const $select2 = $('#select2');

  // 清空当前select2内容
  $select2.empty();

  // 筛选出文本以目标前缀开头的选项，添加到select2中
  select2OriginalOptions.filter(function() {
    return $(this).text().trim().startsWith(targetPrefix);
  }).appendTo($select2);
}).trigger('change'); // 初始化触发一次，确保页面加载时就有正确的显示

备选方案：直接控制选项显示（现代浏览器适用） #

如果不想重新填充选项，也可以直接遍历控制选项的显示状态，兼容性覆盖大部分现代浏览器：

$('#select1').on('change', function() {
  const targetPrefix = $(this).find('option:selected').text().trim();
  
  $('#select2 option').each(function() {
    const optionText = $(this).text().trim();
    // 用toggle直接控制显示/隐藏状态
    $(this).toggle(optionText.startsWith(targetPrefix));
  });
}).trigger('change');

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