<select> 没有第一个<select>选定值的克隆

Question

我的网站上有两个下拉菜单。

第一个是使用对我的数据库的 ajax 调用填充的，该调用返回一些 json。

我希望第二个是第一个的精确副本，但少了一个选项：在第一个下拉列表中选择的选项。

有没有一种方便的方法可以在jQuery中做到这一点？

这是我到目前为止尝试的：

$('#first').find('option').clone().find('option:selected').remove().end().appendTo('#second');

但这只会克隆它，而不会删除所选选项。

任何帮助都非常感谢！

Answer 1

可以使用not()方法筛选出所选选项，然后将克隆的集合追加到第二个下拉列表中：

$('#first option').not(':selected').clone().appendTo('#second');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first">
<option>1</option>
<option selected>2</option>
<option>3</option>
</select>
<select id="second"></select>

Answer 2

您可以在将克隆附加到新节点后简单地使用 filter((，例如：

$('#first option').clone().appendTo('#second').filter(":selected").remove();

请参阅下面的片段：

$('#first option').clone().appendTo('#second').filter(":selected").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first">
<option>One</option>
<option>Two</option>
<option selected >three</option>
<option>Four</option>
</select>
<select id="second">
</select>

Answer 3

您可以使用:not()选择器。您也可以添加change事件，而不是追加只是更改 html。这样，只要您更改值，它就会更新。

var $first = $("#first");
$first.on('change', function() {
$('#second').html($first.find('option:not(:selected)').clone());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select id="second"></select>