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 Respostas
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
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;
<select>
é que desativa opções nos outros, o inverso não acontece ?