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 Alan Arnese
      Bom dia pessoal
       
      Estou estruturando um slideshow puro em css3 + html mas percebi que vou precisar de jquery para algumas funções, eu vinculei radios com lables para a navegação do menu e consegui montar em jquery o efeito "active" para quando é clicado em um botão, tudo funcionando perfeitamente e responsivamente nos browsers.

      Só que agora eu preciso que os slides passem automaticamente e vinculados a navegação, trocando ambos da direta pra esquerda, mantendo o efeito "active" na navegação com harmonia com as imagens, todos os exemplos que saí atrás na internet não vinculam radios com lables para navegação, então isso está me causando uma dificuldade além do que esperava, desde já agradeço a ajuda de vocês
       
      Segue abaixo os códigos
      Index.html
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <input type="radio" name="r" id="r4"> <input type="radio" name="r" id="r5"> <div class="slide s1"> <a href="#"> <img src="1.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="2.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="3.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="4.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="5.jpg" alt=""></a> </div> </div> <div class="navigation"> <label for="r1" class="bar active"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> <label for="r4" class="bar"></label> <label for="r5" class="bar"></label> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).on('click', 'label', function() { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>  style.css
       
      *{ margin: 0px; padding: 0px;} .slidershow{ width: 100%; height: 100%; overflow: hidden; position: absolute; max-height: 70%; } .middle{ position: absolute; } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 60px; height: 5px; background-color: #c1c0c0; margin: 6px; cursor: pointer; transition: 0.4s; } .bar:hover{ background: #ddcf19; } .bar.active{ background: #ddcf19; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide a{ display: block; width: 100%; height: 100%; cursor: pointer;} .slide img{ width: 100%; height: 100%; object-fit: cover; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } #r4:checked ~ .s1{ margin-left: -60%; } #r5:checked ~ .s1{ margin-left: -80%; } Basicamente quero como o link abaixo mas vinculando meus controles de navegação
       
      Exemplo
    • By juh2425
      Boa noite pessoal
      estou com um dificuldade em como faço uma validação de data atual no caso não pode ser permitido data maior que a data atual do dia ja fiz da data em branco alguem poderia de auxilar:
       
       <script>
                  $("#btn__Gravar").click(function () {
                      if ($("#tipo_movimento").val().trim() == "") {
                          alert("Selecionar o tipo do movimento");
                          return false;
                      }
                      if ($("#tipo_movimento").val().trim() == "") {
                          alert("Selecionar a categoria do movimento");
                          return false;
                      }
                      if ($("#tipo_movimento").val().trim() == "") {
                          alert("Prencher o campo data movimento");
                          return false;
                      }
                      if ($("#valor_movimento").val().trim() == "") {
                          alert("Prencher o campo data movimento");
                          return false;
                      }
                  })
              </script>
    • By jackrs
      Gostaria de saber como consigo colocar um animate/effect de transição mais "suave" na troca das divs do código anexo.
      https://jsfiddle.net/h2av6nct/
    • By frodrigues49
      function getProduto(a){ var a = $(a) var idproduto = a.parent().parent().parent().find(".idproduto"); var produto = a.parent().parent().parent().find(".produto"); var preco = a.parent().parent().parent().find(".preco"); var vId = idproduto.val(); var vProduto = produto.val(); var vPreco = preco.val(); var vQnt = 1; var vTotal = (parseFloat(vQnt) * parseFloat(vPreco)); var prodAdd = false; $(".id").each(function(index, value) { if ($(value).val() == vId) { $('input[id^="pqnt"]').get(0).value++ ; prodAdd = true; } }); if (!prodAdd) { var cont=0; var linha = '<tr class="selected" id="linha'+cont+'">'+ '<td>'+ '<input class="id" type="hidden" name="idproduto[]" value="'+vId+'">'+vProduto+ '</td>'+ '<td>'+ '<input id="preco" type="text" class="form-control text-right" name="preco[]" value="'+vPreco+'" onblur="multiplicar();" onblur="formatar();">'+ '</td>'+ '<td>'+ '<input id="pqnt" type="text" class="form-control text-center" name="qnt[]" value="'+vQnt+'"><span class="vlr">'+ '</td>'+ '<td>'+ '<input style="text-align: right;" id="subtotal" class="form-control subtotal" type="hidden" value="'+vTotal+'" readonly onblur="calcular();">'+ '<input style="text-align: right;" type="text" class="form-control subtotalT" id="subtotalT" name="subtotal[]" value="'+numberToReal(vTotal)+'" readonly>'+ '</td>'+ '<td class="text-center">'+ '<a style="cursor:pointer" onclick="deleteRow(this)" class="glyphicon glyphicon-trash"></a>'+ '</td>'+ ' </tr>' cont++; $('#mytbody').append(linha); contItem(); calcular(); $(".subtotal").each(function() { $(this).blur(function(){ calcular(); }); }); } } Boa tarde
       
      Estou fazendo um projeto em laravel de um pdv. Gostaria de quando clicar na imagem do pruduto ele inserisse na lista, porem ao clicar novamente ele aumentasse a qnt e nao inserisse. Conforme imagem em anexo.

    • By David Samu
      let total_entradas = 3//ai virar total de colunas
      let total_linhas   = 0
      let tabela         = []
      for(let coluna=total_entradas; coluna>0; coluna-- )
      {
          let repeticao = 1
          for(let x=1; x<=coluna; x++)
          {
              repeticao = (2 * repeticao)
          }
          if( total_linhas === 0 )
          {
              total_linhas = repeticao
          }
          if(repeticao != 1) 
          {
              repeticao = (repeticao / 2)
          }
          let valores = []
          let vdd     = 1
          let lastBoo = 'v'
          for( let linha=0; linha < total_linhas; linha++ )
          {
              if( vdd <= repeticao )
              {
                  val = lastBoo
              }
              else
              {
                  if( lastBoo == 'v' )
                  {
                      lastBoo = 'f'  
                  }
                  else 
                  {
                      lastBoo = 'v'
                  }
                  val = lastBoo
                  vdd=1
              }
              vdd++
              valores.push(val)
          }
          tabela[ (coluna - 1) ] = valores   
      }
      let countCol = 1
      for(let coluna=tabela.length - 1; coluna>=0; coluna--)
      {
          console.log("Coluna ", countCol++)
          for(let linha = 0; linha < tabela[coluna].length; linha ++)
          {
              console.log( tabela[coluna][linha] )
          }
      }
×

Important Information

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