Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, boa noite.
Recentemente encontrei esse tópico que atende minha necessidade em partes.
Sim, a funcao utilizada remove de um combo a opcao escolhida em outro, mas se nós trocamos a opcao escolhida nesse combo a opcao retirada anteriormente não volta para o outro combo.
Exemplo: combo 1 tem opcoes a, b, c e d
Combo 2 tem opcoes a, b, c e d
Ao escolher opcao a no combo 1 ela some do combo 2
Mas ao trocar de opcao a para opcao b no combo 1, a opcao a retirada do combo 2 nao volta
Alguem pode me dar uma luz de como fazer isso?
Como implementar nesse exemplo:
https://forum.imasters.com.br/topic/307461-resolvido-tirar-uma-opção-de-um-campo-select-combobox/
E Ronaldo acho interessante avaliar essa ideia que o Marcos comentou, vou colcoar aqui uma solução local, porque perdi um tempo ontem codificando:
De fato, ficou mto bacana
A solucao seria exatamente essa mesmo
Meu unico temor é que nao estou trabalhando com times entao seria obrigatorio declarar as opcoes dos combos nessas vars?
function getOptions() {
var times = [
{
name: 'escolha',
value: 'escolha',
text: 'Escolha'
},eu so fiz como exemplo, você pode alterar o nome dessa variavel "times" para o nome que você achar melhor para sua lógica de negócio, alterar o obejto, mas se mudar a estrutura do objeto terá que ajustar a lógica, eu nomiei como time porque a referencia que mencionou do outro post usava esse padrão. mas como os nomes dos metodos estão bem sugestivos acrdito que você não terá problema para adaptar a sua necessidade.
Sim, vou tentar aqui achei mto bacana o exemplo
Se conseguir, posto o resultado e mto mto obrigado
Nao consegui fazer...na pratica, qdo escolho o valor no primeiro combo ele apresenta o mesmo valor no segundo combo
Quando escolho um valor no segundo combo ele reseta o primeiro combo e a opcao escolhida deixa de ser marcada
<script type="text/javascript">
function init() {
var combo1 = generateOptions(null, null);
var combo2 = generateOptions(null, null);
setOptions(getSelectReference('bus1_0'), combo1);
setOptions(getSelectReference('bus2_0'), combo2);
}
function changeOption(selectSource) {
var selectTarget = getSelectToChange(selectSource.name);
var options = generateOptions(selectTarget.value, selectSource.value);
setOptions(selectTarget, options);
}
function setOptions(selectTarget, options) {
selectTarget.innerHTML = '';
options.forEach(function(item) {
selectTarget.appendChild(item);
});
}
function generateOptions(optionSelected, optionToRemove) {
var options = getOptions();
var elementOptions = [];
options.forEach(function(item){
if(item.name !== optionToRemove || optionToRemove == 'Escolha') {
var el = document.createElement('option');
el.setAttribute('name',item.name);
el.value = item.value;
el.innerHTML = item.text;
if(item.name === optionSelected) {
el.setAttribute('selected', true);
}
elementOptions.push(el);
}
});
return elementOptions;
}
function getSelectToChange(selectSource) {
var selectTarget = selectSource === 'bus1_0'? 'bus2_0' : 'bus1_0';
var selectElement = getSelectReference(selectTarget);
return selectElement;
}
function getSelectReference(selectTarget) {
return document.getElementsByName(selectTarget)[0];
}
function resetOptions() {
init();
}
function getOptions() {
var combo = [
{
name: 'Escolha',
value: '',
text: 'Escolha'
},
{
name: 'ÔNIBUS 01 - ASSENTO 02',
value: '1',
text: 'ÔNIBUS 01 - ASSENTO 02'
},
{
name: 'ÔNIBUS 01 - ASSENTO 03',
value: '2',
text: 'ÔNIBUS 01 - ASSENTO 03'
},
{
name: 'ÔNIBUS 01 - ASSENTO 04',
value: '3',
text: 'ÔNIBUS 01 - ASSENTO 04'
},
{
name: 'ÔNIBUS 01 - ASSENTO 05',
value: '4',
text: 'ÔNIBUS 01 - ASSENTO 05'
},
{
name: 'ÔNIBUS 01 - ASSENTO 06',
value: '5',
text: 'ÔNIBUS 01 - ASSENTO 06'
},
{
name: 'ÔNIBUS 01 - ASSENTO 07',
value: '6',
text: 'ÔNIBUS 01 - ASSENTO 07'
},
{
name: 'ÔNIBUS 01 - ASSENTO 08',
value: '7',
text: 'ÔNIBUS 01 - ASSENTO 08'
},
{
name: 'ÔNIBUS 01 - ASSENTO 09',
value: '8',
text: 'ÔNIBUS 01 - ASSENTO 09'
},
{
name: 'ÔNIBUS 01 - ASSENTO 10',
value: '9',
text: 'ÔNIBUS 01 - ASSENTO 10'
},
{
name: 'ÔNIBUS 01 - ASSENTO 11',
value: '10',
text: 'ÔNIBUS 01 - ASSENTO 11'
},
{
name: 'ÔNIBUS 01 - ASSENTO 12',
value: '11',
text: 'ÔNIBUS 01 - ASSENTO 12'
},
{
name: 'ÔNIBUS 01 - ASSENTO 13',
value: '12',
text: 'ÔNIBUS 01 - ASSENTO 13'
},
];
return combo;
}
init();
</script>
Combos
Combo 1 <select name="bus1_0" id="bus1_0" tabindex="14" onchange="changeOption(this);"><option name="Escolha" value="">Escolha</option><option name="ÔNIBUS 01 - ASSENTO 02" value="1">ÔNIBUS 01 - ASSENTO 02</option><option name="ÔNIBUS 01 - ASSENTO 03" value="2">ÔNIBUS 01 - ASSENTO 03</option><option name="ÔNIBUS 01 - ASSENTO 04" value="3">ÔNIBUS 01 - ASSENTO 04</option><option name="ÔNIBUS 01 - ASSENTO 05" value="4">ÔNIBUS 01 - ASSENTO 05</option><option name="ÔNIBUS 01 - ASSENTO 06" value="5">ÔNIBUS 01 - ASSENTO 06</option><option name="ÔNIBUS 01 - ASSENTO 07" value="6">ÔNIBUS 01 - ASSENTO 07</option><option name="ÔNIBUS 01 - ASSENTO 08" value="7">ÔNIBUS 01 - ASSENTO 08</option><option name="ÔNIBUS 01 - ASSENTO 09" value="8">ÔNIBUS 01 - ASSENTO 09</option><option name="ÔNIBUS 01 - ASSENTO 10" value="9">ÔNIBUS 01 - ASSENTO 10</option><option name="ÔNIBUS 01 - ASSENTO 11" value="10">ÔNIBUS 01 - ASSENTO 11</option><option name="ÔNIBUS 01 - ASSENTO 12" value="11">ÔNIBUS 01 - ASSENTO 12</option><option name="ÔNIBUS 01 - ASSENTO 13" value="12">ÔNIBUS 01 - ASSENTO 13</option></select>Combo 2
<select name="bus2_0" id="bus2_0" tabindex="16" onchange="changeOption(this);"><option name="Escolha" value="">Escolha</option><option name="ÔNIBUS 01 - ASSENTO 02" value="1">ÔNIBUS 01 - ASSENTO 02</option><option name="ÔNIBUS 01 - ASSENTO 03" value="2">ÔNIBUS 01 - ASSENTO 03</option><option name="ÔNIBUS 01 - ASSENTO 04" value="3">ÔNIBUS 01 - ASSENTO 04</option><option name="ÔNIBUS 01 - ASSENTO 05" value="4">ÔNIBUS 01 - ASSENTO 05</option><option name="ÔNIBUS 01 - ASSENTO 06" value="5">ÔNIBUS 01 - ASSENTO 06</option><option name="ÔNIBUS 01 - ASSENTO 07" value="6">ÔNIBUS 01 - ASSENTO 07</option><option name="ÔNIBUS 01 - ASSENTO 08" value="7">ÔNIBUS 01 - ASSENTO 08</option><option name="ÔNIBUS 01 - ASSENTO 09" value="8">ÔNIBUS 01 - ASSENTO 09</option><option name="ÔNIBUS 01 - ASSENTO 10" value="9">ÔNIBUS 01 - ASSENTO 10</option><option name="ÔNIBUS 01 - ASSENTO 11" value="10">ÔNIBUS 01 - ASSENTO 11</option><option name="ÔNIBUS 01 - ASSENTO 12" value="11">ÔNIBUS 01 - ASSENTO 12</option><option name="ÔNIBUS 01 - ASSENTO 13" value="12">ÔNIBUS 01 - ASSENTO 13</option></select>
Sem contar que no meu caso posso ter mais combos e regra vai ser sempre a mesma, pois um assento escolhido para um passageiro nao pode ser escolhido por outro passageiroas referencias dentro do metodo generateOptions estavam erradas já que o value é o name do seu objeto são diferentes, fiz uma alteração:
https://jsbin.com/mocexidebu/edit?html,js,output
Obs: Sobre seu problema envolvendo multiplos selects, o pessoal do forum só vai poder te ajudar se você expor uma forma geral de como vai funcionar essa lógica de negócio, um esboço do layout e uma explicação iriam ajudar
Moderadores, podem marcar como resolvido esse topico por favor.
Vou add a questao de como comparar varios combos em outro topico para nao confundir
acho que a melhor ideia seria voce criar um carregamento em ajax. assim que voce selecione o desmacase um campo fazia a busca com filtro