JavaScript/jQuery实现：选中Select选项后填充另一Select后续选项

我来帮你排查下代码里的问题，顺便给出修复后的方案：

你的代码里的几个关键错误： #

• 选择器拼写失误：获取选中索引时用了$("js-select-1")，漏掉了类选择器的.，应该是$(".js-select-1")。其实更高效的是直接用$(this)——因为事件绑定在当前元素上，不用重复查找DOM。
• 直接操作了原DOM元素的引用：$('.js-select-1').find("option")拿到的是第一个select里的真实DOM元素集合，你用$.extend复制的还是这些元素的引用，所以后续的remove()会直接把原select里的选项删掉，这就是第一个select被清空的原因。我们需要操作的是选项的副本，而非原元素。
• 丢失了第二个select的默认提示项：你直接用$('.js-select-2').html(optionsArr)会覆盖掉原本的<option disabled>End date</option>，这个提示项需要保留。

修复后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="js-select-1">
  <option disabled>Start date</option>
  <option>08AM</option>
  <option>09AM</option>
  <option>10AM</option>
  <option>11AM</option>
  <option>12AM</option>
</select>
<select class="js-select-2">
  <option disabled>End date</option>
</select>

<script>
$(document).on('change', '.js-select-1', function(e) {
  // 获取当前选中项的索引
  const selectedIndex = $(this).prop('selectedIndex');
  // 克隆第一个select的所有option（操作副本不影响原元素）
  const allOptions = $(this).find('option').clone();
  // 筛选出选中项之后的所有选项（索引大于选中索引的项）
  const targetOptions = allOptions.filter((index) => index > selectedIndex);
  
  // 重置第二个select：先保留默认提示项，再追加筛选后的选项
  $('.js-select-2')
    .html('<option disabled>End date</option>')
    .append(targetOptions);
})
</script>

代码关键点说明： #

1. 用$(this)直接获取触发事件的select元素，避免重复DOM查询，更高效可靠。
2. 使用.clone()复制option的副本，确保操作时不会修改原select的选项。
3. 用.filter()精准筛选出选中项之后的选项，逻辑清晰易懂。
4. 先重置第二个select的内容为默认提示项，再追加目标选项，保证提示项始终存在。

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