Javascript/jQuery：使用从另一个select中获取的选项填充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>

开始日期
上午8点
上午9点
上午10点
上午11点
上午12点
结束日期

您正在将元素从一个

移动到另一个

。如果要将它们保留在原始菜单中，则需要克隆它们

不需要数组，只需迭代jQuery集合即可


$（document）.on（'change'，'js-select-1'，函数（e）{
e、 预防默认值（）；
var options selectedIndex=$（“.js-select-1”）.prop（'selectedIndex'）；
var options=$（'.js-select-1 option:gt（'+optionSelectedIndex+'））；
$（“.js-select-2”）.empty（）；
选项。每个（函数（）{
$（“.js-select-2”）.append（$（this.clone（））；
});
})

开始日期
上午8点
上午9点
上午10点
上午11点
上午12点
结束日期
较短版本，使用jQuery选择器和：


$（'select.js-select-1'）。更改（函数（e）{
var$options=$（`option:gt（${this.selectedIndex}）`，this.clone（）；
$options.appendTo(
$（'select.js-select-2'）
.find（'>option:not（：first）'））
.删除（）
(完)
);
});

开始日期
上午8点
上午9点
上午10点
上午11点
上午12点
结束日期
下面是一个更加灵活的示例


$（'select.js-select-1'）。更改（函数（e）{
var i=$（“选项：选中”，this）.index（）；
var opts=$（“选项：gt（+i+”），this.clone（）；
$（'.js-select-2选项：gt（0'）.remove（）；
$（'.js-select-2'）。附加（opts）；
});

开始日期
上午8点
上午9点
上午10点
上午11点
下午12点
下午1点
下午2点
下午3点
下午4点
下午五点
结束日期
StackOverflow不是免费的编码服务。所以我希望你能。请更新您的问题，以显示您已在某个应用程序中尝试过的内容。有关更多信息，请参阅，并使用：）与@Barmar达成一致-您尝试了什么？你被困在哪里？@KevinFriedheim我在第一个PostWesome中添加了我正在开发的javascript。为什么不克隆整个
选项
变量（而不是在循环中克隆），然后注入
.html（）
？就像@jom的解决方案一样，我最初是使用
.html（）
而不是
.clone（）
通过answer编码的，但这不起作用。我把它改成了
.clone（）
，没有意识到我不再需要这个循环。你的解决方案比@jom的好多少？@FredK基本上是一样的。只是不删除第一个
元素。@FredK I更新了我的，在第二个
选择中保留第一个
选项
，以备需要。更新后在第二个
选择中保留第一个
选项
。
<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>