Javascript/jQuery：使用从另一个选择中获取的选项填充选择答案

【问题标题】：Javascript/jQuery: populate a select with options taken from another selectJavascript/jQuery：使用从另一个选择中获取的选项填充选择
【发布时间】：2019-06-13 05:52:01
【问题描述】：

我有这两个<select>s：

<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>

我需要一个 javascript/jquery 脚本，当我从选择 1 中选择一个选项时，它会使用它被选择的选项旁边的选项填充第二个选择。

示例：我从选择 1 中选择 10AM，场景应该变成：

<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>
  <option>11AM</option>
  <option>12AM</option>
</select>

我尝试使用此脚本但不起作用：

$(document).on('change', '.js-select-1', function(e) {
  e.preventDefault();

  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');

  var options = $('.js-select-1').find("option");

  //var optionsArr = options.slice();
  var optionsArr = $.extend(true, [], options);

  optionsArr.slice(0, optionSelectedIndex + 1).remove();

  $('.js-select-2').html(optionsArr);
})

<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>

它从选择 1 中删除所有选项，并使用选择 1 的所有初始选项填充选择 2。我哪里错了？

【问题讨论】：

StackOverflow 不是免费的编码服务。所以希望你try to solve your own problem first。请更新您的问题以在minimal reproducible example 中显示您已经尝试过的内容。如需更多信息，请参阅How to Ask，并拨打tour :)
同意@Barmar - 你试过什么？你被困在哪里了？
@KevinFriedheim 我在第一篇文章中添加了我正在处理的 javascript

标签： javascript jquery html arrays select

【解决方案1】：

较短的版本，使用 jQuery :gt() 选择器和.appendTo()：

$('select.js-select-1').change(function(e) {
  var $options = $(`option:gt(${this.selectedIndex})`, this).clone();

  $options.appendTo(
    $('select.js-select-2')
      .find('> option:not(:first)')
      .remove()
      .end()
  );
});

<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>

我们需要clone 过滤后的<option>s 的原因是，如果没有这个，这些元素将被分离并附加到目标元素上，而不是实际复制过来。

【讨论】：

更新为保留第二个 select 中的第一个 option。

【解决方案2】：

您正在将元素从一个 <select> 移动到另一个。如果您想将它们保留在原始菜单中，则需要克隆它们。

不需要数组，你可以遍历 jQuery 集合。

$(document).on('change', '.js-select-1', function(e) {
  e.preventDefault();

  var optionSelectedIndex = $(".js-select-1").prop('selectedIndex');

  var options = $('.js-select-1 option:gt(' + optionSelectedIndex + ')');
  $(".js-select-2").empty();
  options.each(function() {
    $(".js-select-2").append($(this).clone());
  });
})

<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>

【讨论】：

太棒了。为什么不克隆整个options 变量（而不是在循环内克隆）然后注入.html()？喜欢@jom 的解决方案
我最初使用.html() 而不是.clone() 通过答案编码，但这不起作用。我将其更改为.clone()，但没有意识到我不再需要循环。

【解决方案3】：

这是一个更灵活的示例。

$('select.js-select-1').change(function(e) {
  var i = $("option:selected", this).index();
  var opts = $("option:gt(" + i + ")", this).clone();
  $('.js-select-2 option:gt(0)').remove();
  $('.js-select-2').append(opts);
});

<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>12PM</option>
  <option>01PM</option>
  <option>02PM</option>
  <option>03PM</option>
  <option>04PM</option>
  <option>05PM</option>
</select>

<select class="js-select-2">
  <option disabled>End date</option>
</select>

只要您更改开始日期，它就会更新结束日期。

希望对您有所帮助。

【讨论】：

您的解决方案比@jom 的解决方案更好吗？
@FredK 大致相同。只是不删除第一个<option> 元素。
@FredK 我更新了我的第一个option 和第二个select，以备不时之需。