Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ronaldosdb

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

Por , em Javascript

Recommended Posts

ronaldosdb    1

ronaldosdb
Postado

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/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos_imasters    288

Marcos_imasters
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

ronaldosdb    1

ronaldosdb
Postado

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

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ronaldosdb    1

ronaldosdb
Postado

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

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

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 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • belann
      Upload de arquivos com javascript
      Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito