3

Como poderia fazer para zerar um valor de um select baseado no option de outro select, por exemplo tenho essas duas caixas de seleção, quando a opção "A vista" for marcada gostaria de zerar o valor de parcelas no outro select, é possível fazer isso? Queria fazer isso porque estou passando o valor para o PHP e jogando em um modelo HTML para gerar um PDF, porém sempre está marcado o valor "2x" no segundo select.

<select name="f_taskop">
  <option value="À vista">À vista</option>
  <option value="Parcelado">Parcelado</option>
</select>

<select id="n-parcelas" name="f_parce">
  <option value="2">2x</option>
  <option value="3">3x</option>
  <option value="4">4x</option>
</select>
5
  • O que queres dizer com zerar o valor de parcelas? queres remover as opções ou mudar os valores das opções disponíveis?
    – Sergio
    Commented 2/10/2017 às 11:28
  • Queria mudar o valor para 0 quando tiver selecionado o "a vista" no primeiro select.
    – HBretone
    Commented 2/10/2017 às 11:29
  • 1
    Possível duplicata de Como mudar conteudo de um select a partir de outro select
    – Marconi
    Commented 2/10/2017 às 11:31
  • @HenriqueBretone mas não há nenhuma opção com o valor 0.
    – Sergio
    Commented 2/10/2017 às 11:38
  • Então no segundo select é preciso ter uma opção com o valor 0?
    – HBretone
    Commented 2/10/2017 às 11:41

2 Respostas 2

4

Criei uma <option> com valor zero no select de parcelas em caso da forma de pagamento ser à vista, criei uma classe para simular um readonly no select de parcelas assim o usuário perceberá que as parcelas só estão disponíveis para forma de pagamento parcelada.

Sempre que a forma de pagamento for alterada verifico qual é seu novo valor para "habilitar as parcelas/ desabilitar e zerar as parcelas"

function habilitaParcelas(f_taskop){
  var formaPagamento = f_taskop.value;
  var parcelas = document.getElementById('n-parcelas');
  if(formaPagamento == 'Parcelado'){
    parcelas.classList.remove("selectReadonly");
  }else{
    parcelas.value = "0";
    parcelas.classList.add("selectReadonly");
  }
}
.selectReadonly {
    background: #eee; 
    pointer-events: none;
    touch-action: none;
}
<div>
  <label for="f_taskop">Forma de pagamento: </label>
  <select name="f_taskop" id="f_taskop" onchange="habilitaParcelas(this)">
    <option value="À vista">À vista</option>
    <option value="Parcelado">Parcelado</option>
  </select>
</div>

<div>
  <label for="f_taskop">Parcelas</label>
  <select id="n-parcelas" name="f_parce" class="selectReadonly" tabindex="-1">    
    <option value="0">Seleção disponível para pagamentos parcelados</option>
    <option value="2">2x</option>
    <option value="3">3x</option>
    <option value="4">4x</option>
  </select>
</div>

1

Solução usando addEventListener e window.onload (criando <option> dinamicamente no select das parcelas):

pri_select = document.getElementsByTagName("select")[0];
seg_select = document.getElementById("n-parcelas");

function checaSelect(){
	if(pri_select.value == "À vista"){
		seg_select.setAttribute("style","pointer-events: none;touch-action: none;background: #eee;");
		opt_1x = document.createElement("option");
		opt1x_txt = document.createTextNode("1x");
		opt_1x.appendChild(opt1x_txt);
		opt_1x.setAttribute("value","0");
		seg_select.insertBefore(opt_1x,seg_select.getElementsByTagName("option")[0])
		seg_select.selectedIndex = 0;
	}else{
		seg_select.getElementsByTagName("option")[0].outerHTML = "";
		seg_select.setAttribute("style","");
	}
}

pri_select.addEventListener("change", checaSelect);
window.onload = checaSelect();
<select name="f_taskop">
  <option value="À vista">À vista</option>
  <option value="Parcelado">Parcelado</option>
</select>

<select id="n-parcelas" name="f_parce">
  <option value="2">2x</option>
  <option value="3">3x</option>
  <option value="4">4x</option>
</select>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .