Question

我有这两个<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中选择一个选项时，它会在第二个select中填充选中的那个旁边的选项。

示例：我从选择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。我在哪里错了？

Answer 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>的原因是，如果没有这些，这些元素将被分离并附加到目标元素上，而不是实际复制过来。

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

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

无论何时更改开始日期，它都会更新结束日期。

希望有帮助。

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

3 个答案: