Question

我有多个具有相同选项的下拉菜单。

当用户选择一个下拉选项时，必须将其从其他下拉框中删除。
从同一下拉菜单中选择另一个值时，删除的值应重新添加到所有下拉框中。

我已经完成了下面的第一种情况：

HTML：

<select class="dropdown" size="7">
    <option></option>
    <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>
</select>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>

jQuery：

$(function() {
  $('.dropdown').change(function() {
    dropdownval = $(this).val();
    $('.dropdown').not(this).find('option[value="' + dropdownval + '"]').remove();
  });
});

我陷入第二种情况。任何帮助将不胜感激。

Answer 1

更简单的方法是添加属性disabled而不是删除它们。就用户界面而言，我认为它也更好。

删除它们意味着它要复杂得多，因为您必须将它们重新添加到正确的位置。请注意，我在var中添加了dropdownval声明，否则它将是一个全局变量。

在您要禁用新值之前重新启用它们的技巧是将以前的值存储在数据字段中，这里我使用了'data-previous-value'

$(function() {
  $('.dropdown').change(function() {
    var prev = $(this).data('previous-value');
    if(prev){
      $('.dropdown').not(this).find('option[value="' + prev + '"]').attr('disabled', false);
    }
    var dropdownval = $(this).val();
    $('.dropdown').not(this).find('option[value="' + dropdownval + '"]').attr('disabled', true);
    $(this).data('previous-value', dropdownval)
  });
});

select {
    margin: 0.5em 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>

但是，如果您真的要它们消失，我将为此使用CSS类（此处为hidden）。您可以像这样在链接的函数调用中做到这一点：

$(function() {
  $('.dropdown').change(function() {
    var prev = $(this).data('previous-value');
    if(prev){
      $('.dropdown').not(this).find('option[value="' + prev + '"]').removeClass('hidden').attr('disabled', false);
    }
    var dropdownval = $(this).val();
    $('.dropdown').not(this).find('option[value="' + dropdownval + '"]').addClass('hidden').attr('disabled', true);
    $(this).data('previous-value', dropdownval)
  });
});

select {
    margin: 0.5em 1em;
}

.hidden {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>
<select class="dropdown" size="7">
    <option></option>
    <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>
</select>

jQuery-从其他下拉菜单中删除所选的下拉菜单值，并在选择其他选项时将其显示回去

1 个答案: