在多个选择中，使所选选项统一

In several selects make selected options uniq

本文关键字：选项 选择      更新时间：2023-09-26

我有个问题，你需要在哪里找到俄语和英语的成对单词

<div class="form-group" id="question4">
  <label for="q4FirstSelectEN">4</label>
    <div class="row">
      <div class="col-lg-offset-2 col-lg-2 q4EN">
        <select name="firstSelectEn" id="q4FirstSelectEN">
          <option disabled selected style="display: none" value=""></option>
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="purple">purple</option>
        </select>
        <select class="top-buffer" name="secondSelectEn" id="q4SecondSelectEN">
          <option disabled selected style="display: none" value=""></option>
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="purple">purple</option>
        </select>
        <select class="top-buffer" name="secondSelectEn" id="q4ThirdSelectEN">
          <option disabled selected style="display: none" value=""></option>
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="purple">purple</option>
        </select>
      </div>
      <div class="col-lg-2 q4RU">
        <select name="firstSelectRu" id="q4FirstSelectRu">
          <option disabled selected style="display: none" value=""></option>
          <option value="red">красный</option>
          <option value="green">зелёный</option>
          <option value="purple">фиолетовый</option>
        </select>
        <select  class="top-buffer" name="firstSelectRu" id="q4SecondSelectRu">
          <option disabled selected style="display: none" value=""></option>
          <option value="red">красный</option>
          <option value="green">зелёный</option>
          <option value="purple">фиолетовый</option>
        </select>
        <select  class="top-buffer" name="firstSelectRu" id="q4ThirdSelectRU">
          <option disabled selected style="display: none" value=""></option>
          <option value="red">красный</option>
          <option value="green">зелёный</option>
          <option value="purple">фиолетовый</option>
        </select>
      </div>
    </div>
  </div>

例如，当用户在内部（div class='q4EN'）的（select）中选择"红色"时，在此（div class=q4EN）中的所有剩余选择中选择的"红色"选项将变为不可选择

（nonSelectable是css中的类，带display：none）

当用户更改决策并在第一个（选择）中选择"绿色"而不是"红色"时，红色在其余选择中可用，绿色变为不可选择

当所有3个选择都有其值时，用户不能更改任何

我的js不起作用，我没有主意

$(".q4EN").find("select").change(function () {
    $(".q4EN").find("select")
    .not(this)
    .find("option:selected")
    .addClass("nonSelectable");
});

我认为问题出在操作顺序上。

$(".q4EN").find("select").change(function () {
    $(".q4EN").find("select")   //Finds all select lists
    .not(this)                  //Finds all except the one just changed
    .find("option:selected")    //Finds selected of all except the one just changed
    .addClass("nonSelectable"); //Wont do anything because nothing was selected
});

尝试以下操作：

    $(".q4EN").find("select").change(function() {UpdateOptions();});
    function UpdateOptions(){
        var ss = $(".q4EN").find("select");
        ss.find('option').prop("disabled", false); //Enable all before disabling selected
        ss.each(function () {
            var s = $(this).val();
            if(s != undefined && s != "") {
                ss.find("option[value=" + s + "]").prop("disabled", true);
            }
        });
    }

这是实现所需内容的另一种方法。它基本上遍历每个select元素，找到相应的选项并禁用它

$('select').find("option").addClass("selectable");
$('select').on("change",function()
{
   // $(this).find("option").prop("disabled",false); // uncomment this if you wish to reset the disabled selection
    var $thisId = this.id;
    var $selectedOption = $(this).find("option:selected").val();
    $('select').each(function()
    {
        if(this.id !== $thisId)
        {
          //  $(this).find("option").removeClass("non-selectable").addClass("selectable"); // uncomment this if you wish to reset the disabled selection
            $(this).find("option[value=" + $selectedOption + "]").prop("disabled",true).addClass("non-selectable").removeClass("selectable");
        }
    });    
})

https://fiddle.jshell.net/a2n234eq/4/

要针对特定组（如EN和RU），请将$('select')更改为$('.q4EN select')

相关文章：