Tirar uma opção de um campo select (combobox)

[ronaldosdb 1]

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/

[Marcos_imasters 288]

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

[wanderval 19]

E Ronaldo acho interessante avaliar essa ideia que o Marcos comentou, vou colcoar aqui uma solução local, porque perdi um tempo ontem codificando:

 

link: https://jsbin.com/revuqebuso/edit?html,js,output

[ronaldosdb 1]

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'
    },

 

[wanderval 19]

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.

[ronaldosdb 1]

Sim, vou tentar aqui achei mto bacana o exemplo

 

Se conseguir, posto o resultado e mto mto obrigado

[ronaldosdb 1]

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 passageiro

 

 

[wanderval 19]

as 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 

[ronaldosdb 1]

Moderadores, podem marcar como resolvido esse topico por favor.

 

Vou add a questao de como comparar varios combos em outro topico para nao confundir