1

Boas, eu tenho 4 selects html e em todos eles tenho as mesmas opções, eu queria que quando fosse selecionada uma opção do primeiro select essa mesma opção fosse colocada como disabled nos outros selects é possível fazer isso de forma eficiente e rápida com jquery?

2
  • Mas só o primeiro <select> é que desativa opções nos outros, o inverso não acontece ?
    – Isac
    Commented 28/10/2017 às 15:09
  • sim o inverso também acontece, agradeço pela chamada de atenção Commented 28/10/2017 às 15:16

2 Respostas 2

2

Opção mais simples é capturar o evento 'change' do select, fazer um ciclo for a partir dai o siblings ajuda:

HTML

<select name="select1">
    <option>default</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

<select name="select2">
    <option>default</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

JQUERY

$(document).ready(function(){

    $('select').change(function() {

        var value = $(this).val();

        $(this).siblings('select').children('option').each(function() {
            if ( $(this).val() === value ) {
                $(this).attr('disabled', true).siblings().removeAttr('disabled');   
            }
        });

    });

});

Dado um objeto jQuery que representa um conjunto de elementos DOM, o .siblings() método nos permite pesquisar através dos irmãos desses elementos na árvore DOM e construir um novo objeto jQuery a partir dos elementos correspondentes. Ver mais

Exemplo a funcionar.

1

Coloco todas as tags select em um array para iterar depois

var selects = document.getElementsByTagName("select");

Digo que quando o select mudar o valor, chamar a função a seguir

selects[i].onchange = function(e) {

Salvo o valor atual do select separadamente apenas para clareza, pois não precisava, uma vez que o resto está no mesmo escopo var val = this.value;

Agora eu procuro em todos os selects se algum já possui o mesmo valor que foi selecionado agora

for (var z = 0; z < selects.length; z++) {

Aqui eu preciso da posição do select atual, pois você precisa que a verificação ocorra nos outros

var index = Array.prototype.indexOf.call(selects, this);

Aqui eu verfico se não é o select atual e se o valor selecionado é igual ao do atual

if ((z !== index) && selects[z].value === val) {

Agora eu vou desselecionar a tag option selecionada

for (var o = 0; o < options.length; o++) {
    if (options[o].selected) {
        options[o].selected = false;
    }

Aqui eu seleciono novamente a primeira padrão (Qual a sua opção de férias?)

options[0].selected = true;
1
  • de onde provem este i ? selects[i].onchange
    – 13dev
    Commented 28/10/2017 às 15:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .