javascript - 在几个选择中使选定的选项唯一

Question

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

<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')中的(div class='q4EN')中的(select)中选择例如'red'时，在此(div class='q4EN)中选择的所有剩余选择'red'选项变为nonSelectable

(nonSelectable 是带有 display:none 的 css 类)

当用户更改决定并在第一个(选择)中选择“绿色”而不是“红色”时，红色在其余选择中变得可用，而绿色变得不可选择

当所有 3 个选择都有它们的值时，用户不能更改任何内容

我的 js 不工作，我没有想法

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

Answer 1

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

$(".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);
            }
        });
    }