Reset an option-based Select

Asked

Viewed 234 times

3

How could I do to reset a value of a select based on the option of another select, for example I have these two check boxes, when the "View" option is checked I would like to reset the value of plots in the other select, is it possible to do this? I wanted to do this because I am passing the value to PHP and playing in an HTML template to generate a PDF, but it is always marked the value "2x" in the second 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>
javascript html

  • What do you mean zerar o valor de parcelas? you want to remove the options or change the values of the available options?

  • I wanted to change the value to 0 when you selected "the view" in the first select.

  • 1

    Possible duplicate of How to change content of a select from another select

  • @Henriquebretone but there is no option with the value 0.

  • Then in the second select you need to have an option with the value 0?

2 answers

4


I created a <option> zero value in select of installments in case the form of payment is cash, created a classe to simulate a readonly in the select of installments so the user will realize that the installments are only available for payment installments.

Whenever the payment method is changed I check what is your new value to "enable installments/ disable and reset installments"

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

Solution using addEventListener and window.onload (creating <option> dynamically in the select of the plots):

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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.