使用 javascript/jQuery 从下拉列表中删除和添加值答案

【问题标题】：Remove and add values from dropdown using javascript/jQuery使用 javascript/jQuery 从下拉列表中删除和添加值
【发布时间】：2017-05-18 18:11:30
【问题描述】：

我试图在我的代码中实现以下目标，但它变得越来越复杂。我有 'n' 个下拉菜单，其中包含或不包含重复值。

为简单起见，我们假设以下场景：

下拉菜单1：

<select>
<option>100</option>
<option>200</option>
<option>102</option>
</select>

下拉菜单 2：

<select>
<option>100</option>
<option>200</option>
<option>201</option>
</select>

下拉菜单3：

<select>
<option>100</option>
<option>300</option>
<option>301</option>
</select>

案例1：如果用户从下拉菜单 1 中选择值 100，则应从所有下拉菜单中删除 100。当用户将下拉菜单 1 的值从 100 更改为 200 时，应将 100 添加回所有下拉菜单，并应从所有下拉菜单中删除 200。

删除似乎很容易，但添加回值并不困难。

如何维护一个列表或其他一些数据结构来记住要添加的值以及多个值更改的位置？我可以使用任何高级 jquery 功能或通用 javacript 逻辑吗？

【问题讨论】：

如果他们从第 1 次选择中选择 100，从第 2 次选择中选择 200，那么您是否从第一次选择中删除 200 呢？
手动更改下拉菜单是否仅适用于第一个下拉菜单？
是的 200 应该从 dropdown1 选项列表中删除
禁用该选项而不是删除就足够了吗？
@IstiaqueAhmed 没有用户可以更改任何下拉菜单。

标签： javascript jquery drop-down-menu

【解决方案1】：

如果仅禁用该选项而不是实际删除它就足够了，那么以下内容可能对您有用。您可能希望在最初加载网站时调整 selects 的处理方式。

$('select option[value="' + $('select').eq(0).val() + '"]').not(':eq(0)').prop('disabled', true);

$('select').on('change', function() {

  var val = $(this).val();

  $('select option').prop('disabled', false);
  $('select option[value="' + val + '"]').not($(this)).prop('disabled', true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='100'>100</option>
  <option value='200'>200</option>
  <option value='102'>102</option>
</select>
<select>
  <option value='100'>100</option>
  <option value='200'>200</option>
  <option value='201'>201</option>
</select>
<select>
  <option value='100'>100</option>
  <option value='300'>300</option>
  <option value='301'>301</option>
</select>

【讨论】：

+1 是的，我已禁用其他下拉菜单中的选定选项，它的作用就像魅力一样。简洁大方。

【解决方案2】：

最好将显示设置为无。因此，您将避免按适当顺序添加或删除的复杂性。因此，您可以轻松地将它们恢复为可见状态。

$( "option" ).each(function( index ) {
    $(this).css("display", "");
});

【讨论】：

【解决方案3】：

$("#drop").change(function () {
var selected_value=$(this).val();
var dropdown=$(select);
for(i=0;i<dropdown.length;i++){
$("dropdown[i]   option[value=selected_value]").remove();
}
});

设置第一个下拉菜单的 id="drop" 在这里选择值并将其定义为一个变量循环，当 value=selected_value 时，通过下拉选项在页面中删除选项

【讨论】：