Fill in 3 selects without repetitions

Question

Good night,

In a view I need to fill 3 select without repeats.

In the application form in a precise selection process that the student chooses in the first select the first course option, in the second select the second course option and different from the first option, in the third select choose the third course option and different from the first and second options.

I’ve already implemented some codes and the most I could get is this:

$(document).ready(function () {

segundaOpcao2();

$("#primeira_opcao").change(function () {

    $("#segunda_opcao").attr("disabled", true).empty().append("<option value=''>Selecione...</option>");
    $("#terceira_opcao").attr("disabled", true).empty().append("<option value=''>Selecione...</option>");

    if ($(this).val() > 0) {
        segundaOpcao($(this).val());
    } else {
        $("#segunda_opcao").attr("disabled", true).empty().append("<option value=''>Selecione...</option>");
        $("#terceira_opcao").attr("disabled", true).empty().append("<option value=''>Selecione...</option>");
    }
});


function segundaOpcao2() {

    if ($("#primeira_opcao").val() > 0) {
        segundaOpcao($(this).val());
    } else {
        $("#segunda_opcao").attr('disabled', true).empty().append("<option value=''>Selecione...</option>");
        $("#terceira_opcao").attr('disabled', true).empty().append("<option value=''>Selecione...</option>");
    }
}

$("#segunda_opcao").change(function () {

    //$("#terceira_opcao").attr("disabled", true).empty().append("<option value=''>Selecione...</option>");

    if (($("#segunda_opcao").val() != $("#primeira_opcao").val()) && $("#primeira_opcao").val() > 0 && $("#segunda_opcao").val() > 0) {
        terceiraOpcao($("#primeira_opcao").val(), $("#segunda_opcao").val());
    } else {
        $("#segunda_opcao").empty().append("<option value=''>Selecione...</option>");
        $("#terceira_opcao").attr("disabled", true).empty().append("<option value=''>Selecione...</option>");

    }
});

function terceiraOpcao2() {
    if ($("#segunda_opcao").val() > 0) {
        segundaOpcao($(this).val());
    } else {
        primeiraOpcao2();
    }

}

/*
    // Primeira opção de curso
    function primeiraOpcao() {

        $("#segunda_opcao").attr('disabled', true).empty().append("<option value=''>Selecione...</option>");
        $("#terceira_opcao").attr('disabled', true).empty().append("<option value=''>Selecione...</option>");

        var dataID = $("#primeira_opcao").attr('id-data-opcao1');
        $("#primeira_opcao").html("Carregando...");
        $.post("/psei2018/primeira_opcao",
            function (data) {
                cursos = eval(data);
                $("#primeira_opcao").empty().append("<option value=''>Selecione...</option>");
                for (i = 0; i < cursos.length; i++) {

                    $("#primeira_opcao").append("<option value='" + cursos[i].id + "'>" + cursos[i].campus + " - " + cursos[i].sigla + " - " + cursos[i].nome + "</option>");

                }
            });
        $("#primeira_opcao").removeAttr('disabled',true);

    }
    */

// Segunda opção de curso
function segundaOpcao(idPrimeiraOpcao) {

    //$("#segunda_opcao").attr('disabled', true).empty().append("<option value=''>Selecione...</option>");
    //$("#terceira_opcao").attr('disabled', true).empty().append("<option value=''>Selecione...</option>");

    var idPrimeiraOpcao = idPrimeiraOpcao;

    var dataID = $("#segunda_opcao").attr('id-data-opcao2');

    $("#segunda_opcao").html("Carregando...");

    $.post("/psei2018/segunda_opcao", {idPrimeiraOpcao: idPrimeiraOpcao},

        function (data) {
            cursos = eval(data);
            $("#segunda_opcao").removeAttr('disabled');

            $("#segunda_opcao").append("<option value=''>Selecione...</option>");

            for (i = 0; i < cursos.length; i++) {
                if (idPrimeiraOpcao != cursos[i].id) {
                    $("#segunda_opcao").append("<option value='" + cursos[i].id + "'>" + cursos[i].campus + " - " + cursos[i].sigla + " - " + cursos[i].nome + "</option>");
                }
            }
        });


}

// Terceira Opção d curso
function terceiraOpcao(idPrimeiraOpcao, idSegundaOpcao) {

    var idPrimeiraOpcao = idPrimeiraOpcao;
    var idSegundaOpcao = idSegundaOpcao;
    var dataID = $("#terceira_opcao").attr('id-data-opcao3');

    $("#terceira_opcao").html("Carregando...");
    $.post("/psei2018/terceira_opcao", {idPrimeiraOpcao: idPrimeiraOpcao, idSegundaOpcao: idSegundaOpcao},
        function (data) {
            cursos = eval(data);
            $("#terceira_opcao").removeAttr('disabled');
            $("#terceira_opcao").html("<option value=''>Selecione...</option>");
            for (i = 0; i < cursos.length; i++) {
                if (idPrimeiraOpcao != cursos[i].id && idSegundaOpcao != cursos[i].id) {
                    $("#terceira_opcao").append("<option value='" + cursos[i].id + "'>" + cursos[i].campus + " - " + cursos[i].sigla + " - " + cursos[i].nome + "</option>");
                }
            }
        });
    //$("#terceira_opcao").removeAttr("disabled",true);

}

});

The fill of the select is working partially. The main problem occurs when some other field of the form gives error and return to the view the student resolve to change the selects again. Then the selects 2 and 3 no longer work correctly.

Answer 1

with jQuery, you can do this by opening a loop through the elements and options, and comparing the values, follows commented in the example below:

$(document).on('change','select',function(){
  var $this = $(this);
  //Captando o ID do select modificado
  var $thisSelect = $this.closest('select').attr('id');
  //Recebendo o valor dessa mudanca
  var $thisValue = $this.val();
  //Aqui voce abre um loop pelos selects
  $("select").each(function( selIndex ) {
    //Identificando o select do loop
    var $eachSelectEL = $(this); 
    //Pegando o ID do select do loop
    var $eachSelect = $(this).attr('id');
    //Agora compara se o select do loop nao e o mesmo do evento
    if($eachSelect !== $thisSelect){
      //Caso nao seja, abra um loop pelas options
      $eachSelectEL.find("option").each(function( optIndex ) {
        //Receba o valor da option
        var $eachOption = $(this).val();
        //Caso o valor da option seja o mesmo do selecionado no evento 
        if($eachOption === $thisValue){
          //Adiciona a propriedade disable
          $(this).prop('disabled',true)
        }
      })  
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='select-grp'>
<select id='select1'>
  <option disabled selected>-</option>
  <option value="opt1">Opt1</option>
  <option value="opt2">Opt2</option>
  <option value="opt3">Opt3</option>
  <option value="opt4">Opt4</option>
  <option value="opt5">Opt5</option>
  <option value="opt6">Opt6</option>
</select>
<br>
<br>
<select id='select2'>
  <option disabled selected>-</option>
  <option value="opt1">Opt1</option>
  <option value="opt2">Opt2</option>
  <option value="opt3">Opt3</option>
  <option value="opt4">Opt4</option>
  <option value="opt5">Opt5</option>
  <option value="opt6">Opt6</option>
</select>
<br>
<br>
<select id='select3'>
  <option disabled selected>-</option>
  <option value="opt1">Opt1</option>
  <option value="opt2">Opt2</option>
  <option value="opt3">Opt3</option>
  <option value="opt4">Opt4</option>
  <option value="opt5">Opt5</option>
  <option value="opt6">Opt6</option>
</select>
</div>

OBS: Works with as many selects and options as you want.

OBS 2: Inside the loops, Voce can make an ajax query and fill in if you should change the options values.

Answer 2

I understood that there was a hierarchy in the selects(S1>s2>S3) so select 2 cannot prevent 1 from selecting any value and I suggest the solution

$(document).ready(function(){
  $("select").change(function(){
    console.log($(this).val())
     if($(this).attr('id') == "select1") {
        $('#select2').attr('disabled', false);
        if($('#select2').val() == $(this).val()){
          $('#select2').val('-');
          $('#select3').attr('disabled', true);
        }
        $('#select2 option[value="' + $(this).val() + '"]')
          .attr('disabled',true);
        if($('#select3').val() == $(this).val())
          $('#select3').val('-');
        $('#select3 option[value="' + $(this).val() + '"]')
          .attr('disabled',true);
     }
     if($(this).attr('id') == "select2" ) {
        $('#select3').attr('disabled', false);
        if($('#select3').val() == $(this).val())
          $('#select3').val('-');
        $('#select3 option[value="' + $(this).val() + '"]')
          .attr('disabled',true);
     }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='select-grp'>
<select id='select1'>
  <option disabled selected>-</option>
  <option value="opt1">Opt1</option>
  <option value="opt2">Opt2</option>
  <option value="opt3">Opt3</option>
  <option value="opt4">Opt4</option>
  <option value="opt5">Opt5</option>
  <option value="opt6">Opt6</option>
</select>
<br>
<br>
<select id='select2' disabled>
  <option disabled selected>-</option>
  <option value="opt1">Opt1</option>
  <option value="opt2">Opt2</option>
  <option value="opt3">Opt3</option>
  <option value="opt4">Opt4</option>
  <option value="opt5">Opt5</option>
  <option value="opt6">Opt6</option>
</select>
<br>
<br>
<select id='select3' disabled>
  <option disabled selected>-</option>
  <option value="opt1">Opt1</option>
  <option value="opt2">Opt2</option>
  <option value="opt3">Opt3</option>
  <option value="opt4">Opt4</option>
  <option value="opt5">Opt5</option>
  <option value="opt6">Opt6</option>
</select>
</div>

Answer 3

$(document).ready(function () {

    $("#segunda_opcao").attr('disabled', true);
    $("#terceira_opcao").attr('disabled', true);

    $("#primeira_opcao").on("change", function () {

        var idPrimeiraOpcao = $(this).val();
        if (idPrimeiraOpcao > 0) {
            $("#segunda_opcao").attr('disabled', false);

            segundaOpcao(idPrimeiraOpcao);
        } else {
            $("#segunda_opcao").attr('disabled', true).empty().append("<option value=''>Selecione...</option>");
            $("#terceira_opcao").attr('disabled', true).empty().append("<option value=''>Selecione...</option>");
        }
    });

    $("#primeira_opcao").trigger("change");

    function segundaOpcao(idPrimeiraOpcao) {

        console.log('segunda opcao');

        var idPrimeiraOpcao = idPrimeiraOpcao;

        var dataID = $("#segunda_opcao").attr('id-data-opcao2');

        $("#segunda_opcao").html("Carregando...");

        $.post("/psei2018/segunda_opcao", {idPrimeiraOpcao: idPrimeiraOpcao},
            function (data) {
                cursos = eval(data);
                $("#segunda_opcao").removeAttr('disabled');

                $("#segunda_opcao").append("<option value=''>Selecione...</option>");

                for (i = 0; i < cursos.length; i++) {

                    if (dataID == cursos[i].id) {
                        $("#segunda_opcao").append("<option selected value='" + cursos[i].id + "'>" + cursos[i].campus + " - " + cursos[i].sigla + " - " + cursos[i].nome + "</option>");
                        $("#terceira_opcao").attr('disabled', false);
                        terceiraOpcao(idPrimeiraOpcao, dataID);
                    } else {
                        $("#segunda_opcao").append("<option value='" + cursos[i].id + "'>" + cursos[i].campus + " - " + cursos[i].sigla + " - " + cursos[i].nome + "</option>");
                    }

                }
            });
    }

    $("#segunda_opcao").on("change", function () {

        var idSegundaOpcao = $(this).val();
        var idPrimeiraOpcao = $('#primeira_opcao').val();
        if (idSegundaOpcao > 0) {
            $("#terceira_opcao").attr('disabled', false);
            terceiraOpcao(idPrimeiraOpcao, idSegundaOpcao);
        } else {
            $("#terceira_opcao").attr('disabled', true).empty().append("<option value=''>Selecione...</option>");
        }
    });

    $("#segunda_opcao").trigger("change");

    function terceiraOpcao(idPrimeiraOpcao, idSegundaOpcao) {

        var idPrimeiraOpcao = idPrimeiraOpcao;
        var idSegundaOpcao = idSegundaOpcao;
        var dataID = $("#terceira_opcao").attr('id-data-opcao3');

        $("#terceira_opcao").html("Carregando...");
        $.post("/psei2018/terceira_opcao", {idPrimeiraOpcao: idPrimeiraOpcao, idSegundaOpcao: idSegundaOpcao},
            function (data) {
                cursos = eval(data);
                $("#terceira_opcao").removeAttr('disabled');
                $("#terceira_opcao").html("<option value=''>Selecione...</option>");
                for (i = 0; i < cursos.length; i++) {

                    if (dataID == cursos[i].id) {
                        $("#terceira_opcao").append("<option selected value='" + cursos[i].id + "'>" + cursos[i].campus + " - " + cursos[i].sigla + " - " + cursos[i].nome + "</option>");
                    } else {
                        $("#terceira_opcao").append("<option value='" + cursos[i].id + "'>" + cursos[i].campus + " - " + cursos[i].sigla + " - " + cursos[i].nome + "</option>");
                    }

                }
            });


    }
});

A friend from work solved the problem with the code above.

Now course options are not repeated, not even when there is server error return by incorrect filling of some other form field.