Jump to content
ronaldosdb

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

Recommended Posts

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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By violin101
      Caros amigos
       
      saudações...
       
      Sou um pouco novato em JAVASCRIPT, gostaria de tirar uma dúvida com os amigos.
       
      Tenho uma Tabela onde o usuário escolhe o Produto e através de um botão agregar, o sistema cria a Tabela. ATÉ AQUI TUDO BEM.
       
      Minha dúvida:
      como consigo verificar se o Código de algum produto já foi incluído ?
      caso foi, o sistema avisa que já foi informado o código anteriormente.
       
      Código em Javascript
      //Status dos Botões LIMPAR | AGREGAR | ADICIONAR - iniciar como desabilitado. document.getElementById("btn-limp").disabled = true; document.getElementById("btn-agregar").disabled = true; document.getElementById("adicionar").disabled = true; /*---Função para Capturar o Produto selecionado---*/ $(document).on("click",".btn-prod",function(){ prd = $(this).val(); infoprd = prd.split("*"); $("#idProdutos").val(infoprd[0]); $("#cod_interno").val(infoprd[1]); $("#descricao").val(infoprd[2]); $("#prd_unid").val(infoprd[3]); $("#vlr_unit").val(infoprd[4]); $("#qtd_prod").val(infoprd[5]); $("#vlr_total").val(infoprd[6]); $("#modal_prod").modal("hide"); //Função para Atualizar o Status do Botão statusLimparAgregar() }); //Nessa parte do AGREGAR gostaria de veririfcar //se houve ou não duplicidade de código do produto //informado $("#btn-agregar").on("click",function(){ //Monta a Tabela dos Produtos a serem Devolvidos html = "<tr>"; html += "<td width='10%' height='10'><input type='hidden' name='id_prds[]' value='"+infoprd[0]+"'>"+infoprd[1]+"</td>"; html += "<td width='32%' height='10'><input type='hidden' name='descricao[]' value='"+infoprd[2]+"'>"+infoprd[2]+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'><input type='hidden' name='esp[]' value='"+infoprd[3]+"'>"+infoprd[3]+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'><input type='hidden' name='qtd_prod[]' value='"+infoprd[5]+"'>"+infoprd[5]+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'><input type='hidden' name='vlr_unit[]' value='"+infoprd[4]+"'>"+infoprd[4]+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'><input type='hidden' name='vlr_total[]' value='"+infoprd[6]+"'>"+infoprd[6]+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-danger btn-remove-produto' style='padding: 2px 5px;' title='Remover Item da Lista'>"+ "<span class='fa fa-remove'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#btn-agregar").val(null); $("#descricao").val(null); $("#cod_interno").val(null); $("#prd_unid").val(null); $("#vlr_unit").val(null); $("#qtd_prod").val(null); $("#vlr_total").val(null); //Desabilita Buttons document.getElementById("btn-limp").disabled = true; document.getElementById("btn-agregar").disabled = true; });  
      Grato,
       
      Cesar
    • By gersonab
      Bom dia.
      utilizava um código para completar o endereço conforme o cep, funcionando perfeitamente, só que preciso pegar o cep caso não tenha, pelo endereço digitado, pesquisando pela internet encontrei o código abaixo, funciona perfeitamente para os dois casos, só que .... no meu formulário tenho dois campos de endereço, um residencial e outro de trabalho, o código que utilizava antes funcionava para os dois campos, erá só mudar o id do campo do formulário, tipo se eu tinha id="logadouro" em um campo no outro id="logadouro1", só que .... no código atualizado para ambas as pesquisas esta forma não funciona, gostaria da ajuda de vocês para este problema.
      código antigo:
      function limpa_formulário_cep() { $("#logradouro").val(""); $("#bairro").val(""); $("#localidade").val(""); $("#uf").val(""); } $("#cep").blur(function() { var cep = $(this).val().replace(/\D/g, ''); if (cep != "") { var validacep = /^[0-9]{8}$/; if(validacep.test(cep)) { $("#logradouro").val("..."); $("#bairro").val("..."); $("#localidade").val("..."); $("#uf").val("..."); $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { if (!("erro" in dados)) { $("#logradouro").val(dados.logradouro); $("#bairro").val(dados.bairro); $("#localidade").val(dados.localidade); $("#uf").val(dados.uf); } else { limpa_formulário_cep(); alert("CEP não encontrado."); } }); } else { limpa_formulário_cep(); alert("Formato de CEP inválido."); } } else { limpa_formulário_cep(); } }); como podem ver era só duplicar e mudar o id, agora neste ja não consigo
      var inputsCEP = $('#logradouro, #bairro, #localidade, #uf'); var inputsRUA = $('#cep, #bairro'); var validacep = /^[0-9]{8}$/; function limpa_formulário_cep(alerta) { if (alerta !== undefined) { alert(alerta); } inputsCEP.val(''); } function get(url) { $.get(url, function(data) { if (!("erro" in data)) { if (Object.prototype.toString.call(data) === '[object Array]') { var data = data[0]; } $.each(data, function(nome, info) { $('#' + nome).val(nome === 'cep' ? info.replace(/\D/g, '') : info).attr('info', nome === 'cep' ? info.replace(/\D/g, '') : info); }); } else { limpa_formulário_cep("CEP não encontrado."); } }); } // Digitando RUA/CIDADE/UF $('#logradouro, #localidade, #uf').on('blur', function(e) { if ($('#logradouro').val() !== '' && $('#logradouro').val() !== $('#logradouro').attr('info') && $('#localidade').val() !== '' && $('#localidade').val() !== $('#localidade').attr('info') && $('#uf').val() !== '' && $('#uf').val() !== $('#uf').attr('info')) { inputsRUA.val('...'); get('https://viacep.com.br/ws/' + $('#uf').val() + '/' + $('#localidade').val() + '/' + $('#logradouro').val() + '/json/'); } }); // Digitando CEP $('#cep').on('blur', function(e) { var cep = $('#cep').val().replace(/\D/g, ''); if (cep !== "" && validacep.test(cep)) { inputsCEP.val('...'); get('https://viacep.com.br/ws/' + cep + '/json/'); } else { limpa_formulário_cep(cep == "" ? undefined : "Formato de CEP inválido."); } }); desde já agradeço.
    • By spyryt
      Amigos preciso validar este meu formulario, de forma que ele so envie os dados se o numero do cartão seja valido.
       

                          <form id="updateCreditCard" action="index4.php" method="post">                        
                              <fieldset style="border: none">
                                  
                              
                                  
                          
      <div class="divBlock">
                                      
              <div class="divBlock">
                                      <label for="Numbercpf">CPF *</label>
                                      <input required="required" type="text" name="cpf" id="cpf" maxlength="14" > 
               
                                  </div>
                                <div class="divBlock">
                                  <label for="cartao">Numero do Cartão *</label>
                                  <input type="text" id="holderName" maxlength="19" 
         name="cartao">
                                </div>
                                  
                              
                                  </div>
                                  <div class="btn-container">
                                      <button  onKeyPress="" class="sendUpdating">Continuar</button>
                                  </div>
    • By renan mafra
      Eu tenho 2 arquivos CSS externos que contém backgrounds da página.
      Em 1 só tem links para imagens .webP e em outro somente .PNG , eu estou usando um script para detectar se o browser aceita .webP e caso afirmativo ele altera o link CSS externo em HEAD para o css externo com .webP, por padrão inicialmente ele aponta para o .png, testei numa página mais simples e deu ok, mas na hora de colocar aonde quero não funcionou, segue o código:
      No HEAD:
       
      <link href="‪arquivos_css/png.css" rel="stylesheet" id="key">
       
      No JS:
       
       
      ////////////////////////////////////////////////////////////// // FUNÇÃO QUE CRIA O LINK EXTERNO CSS PARA INSERIR NO HEAD // OK// ////////////////////////////////////////////////////////////// function loadCSS(url){ var link = document.createElement('link'); link.setAttribute('href', url ); link.setAttribute('rel', "stylesheet" ); link.setAttribute('id', "key" ); var para = document.getElementsByTagName('head')[0]; //Nó pai HEAD var velho = document.getElementById('key'); //local exato do elemento a ser substituido para.replaceChild(link, velho); //Substituímos o velho pelo novo(link) } ////////////////////////////// Chamada à função do webP ///////////////////////////// WebpIsSupported(function(isSupported){ if(isSupported){ //CHAMA A FUNÇÃO LOADCSS e carrega o link CSS externo com WEBP loadCSS('arquivos_css/webp.css'); } }); ////////////////////////////////////////////////////////////// // FUNÇÃO QUE DETECTA A COMPATIBILIDADE DO BROWSER COM WEBP // ////////////////////////////////////////////////////////////// function WebpIsSupported(callback){ if(!window.createImageBitmap){ callback(false); return; } var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='; fetch(webpdata).then(function(response){ return response.blob(); }).then(function(blob){ createImageBitmap(blob).then(function(){ callback(true); }, function(){ callback(false); }); }); } O erro que está dando no chrome é esse: Failed to load resource: net::ERR_FILE_NOT_FOUND
      já mudei na função loadCSS o endreço dos arquivos de loadCSS('arquivos_css/webp.css'); para loadCSS('/arquivos_css/webp.css');
       
      e não funciona....
       
      o arquivo CSS externo contém backgrounds dentro do seletor HTML
      tipo :
       
      html {
            background-image.....(1);
            background-image.....(2);
            background-image.....(3);
           etc 
      }
      eu vou no elements do chome e está lá no HEAD conforme quero mas não carrega na página e dá este erro no console. –
      o que pode estar acontecendo ? ?
       
       
       
       
    • By Marcos PP
      Preciso colocar a o atributo fadeIN e fadeOut em uma lista de acordo com o numero que o usuário clicar.
      Porem não estou conseguindo formular a função do script para isso
      No id #RESPOSTA tenho os números 1 - 5 - 10 - 20 - 30 - 40 - 50 - 100 - 200 - 300
      O que estou tentando e ao clicar na resposta 10 por exemplo, Todos os resultados da lista maiores que 10 sumam
      e logo depois se eu clicar em 50, permaneça os abaixo de 10 e apareça os ID's ate 50

      Como se fosse um filtro, clico em 10, só aparece os de 1 ate 10, clico em 50, so aparece os entre 1 ate 50 e assim por diante.

      Porem dinamicamente, so adicionando fadeOut e fadeIn
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.