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();

见下面的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: