Fill 3 selects without repetitions

Question

Fill 3 selects without repetitions

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

0

Good evening,

In a precise view fill 3 select with no repetitions.

In the application form in a selective process, the student must select the first course option, in the second select the second course option and the first option, in the third select the third course option and different from the first and second options.

I have already implemented some codes and the most I could do was:

$(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 partially working. The main problem occurs when some other form field fails and returns to the view the student resolves to change the selects. Then selects 2 and 3 do not work properly.

php jquery ajax laravel

asked by anonymous 10.01.2018 / 03:50

3 answers

Generate an array inside XML in sql server Display more than one information in the same table with PHP and MYSQL

score 1 · Answer 1

With jQuery, you can do this by looping through the elements and options, and comparing the values, it's commented on 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><divclass='select-grp'><selectid='select1'><optiondisabledselected>-</option><optionvalue="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 selections and options as you like.

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

score 1 · Answer 2

I understood that I had a hierarchy in the selects (s1 > s2 > s3) so select 2 can not prevent 1 from selecting any value and suggest the following 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><divclass='select-grp'><selectid='select1'><optiondisabledselected>-</option><optionvalue="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>

score 1 · 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 above code.

Now the course options are not repeated, not even when there is server errorback by incorrectly filling in some other form field.