时间戳

首页 > 解决方案 > Javascript/jQuery：使用从另一个选择中获取的选项填充选择

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

问题描述

我有这些 2<select>秒：

<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 脚本，当我从 select 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。我错在哪里？

标签： javascriptjqueryhtmlarraysselect

解决方案

Shorter version, using jQuery :gt() selector and .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>

The reason we need to clone the filtered <option>s is that without this, those elements will be detached and appended onto the target element instead of actually copied over.

推荐阅读