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>

当用户在（select class）里面选择'red'（div class ='q4EN'）时，在此（div class = q4EN）中所有剩余选项中选择'red'选项变为nonselectable

（nonSelectable是css中的类，显示：无）

当用户更改决定并在第一个（选择）中选择“绿色”而不是“红色”时，红色在休息选择中变为可用，绿色变为不可选择

当所有3个选择都有其值时，用户无法更改任何内容

我的js for this is not working and my out of ideas

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

Answer 2

这是实现您所需要的另一种方式。它基本上遍历每个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')

在几个选项中，选择选项uniq

2 个答案: