Question

我有一个包含几个选择标签的网页和一个脚本，如果选择了第一个选择标签下拉列表中的选项，则在第二个选项中禁用。有没有办法改变它，这样不仅可以禁用已经选择的答案，还可以将其从其他答案列表中完全删除？

<select name="option1" size="1" required >
  <option value="" selected disabled hidden>Options</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>
</select>

<select name="option2" size="1"  required >
  <option value="" selected disabled hidden>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>
</select>

脚本直到现在：

var $selects = $('select');

$selects.on('change', function () {
    $("option", $selects).prop("disabled", false);

    $selects.each(function () {
        var $select = $(this),
            $options = $selects.not($select).find('option'),
            selectedText = $select.children('option:selected').text();

        $options.each(function () {
            if ($(this).text() == selectedText) $(this).prop("disabled", true);
        });
    });
});

$selects.eq(0).trigger('change');

Answer 1

您可以这样做：

＆＃13;

$("select").change(function(){
   var selectedValue1 = $(this).val();
   var selectedValue2 = $("select").not($(this)).val();
   $(this).find("option[value!="+selectedValue2+"]").show();
   $("select").not($(this)).find("option[value!="+selectedValue1+"]").show();
   $("select").not($(this)).find("option[value="+selectedValue1+"]").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="option1" size="1" required >
  <option value="" selected disabled hidden>Options</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>
</select>

<select name="option2" size="1"  required >
  <option value="" selected disabled hidden>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>
</select>

＆＃13;

每当更改选项时，将检索所选选项并将其隐藏在其他<select>元素中，同时显示所有其他选项。

Answer 2

HTML

<select id="select1" name="option1" size="1" required >
                  <option value="" selected disabled hidden>Options</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>
                </select>

<select id="select2" name="option2" size="1"  required >
                  <option value="" selected disabled hidden>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>
                </select>

脚本

$('#select1').on('change', function() {
  var value = $(this).val();
  // If you want to reset all of the options when a new one is selected, uncomment this
  // $('#select1, #select2').find('option[value!=""]').removeAttr('disabled').removeAttr('hidden');
  // find the option in current selectpicker and disable it
  $(this).find('option[value="' + value + '"]').attr('disabled', 'disabled');
  // find the option in the other selectpicker and hide it
  $('#select2').find('option[value="' + value + '"]').attr('hidden', 'hidden');
})

小提琴：

https://jsfiddle.net/xpvt214o/125215/

如果已选择，JavaScript将从选择标记列表中删除选项

2 个答案: