Reset value of a Select based on an option

Question

Reset value of a Select based on an option

Navigation

#1 by (4 votes)
#2 by (1 votes)

3

How can I do to zero a value of a select based on the option of another select, for example I have these two check boxes, when the option "The view" is checked I would like to zero the value of plots in the other select, possible to do this? I wanted to do this because I'm passing the value to PHP and playing in an HTML template to generate a PDF, however the value "2x" in the second select is always marked.

<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

asked by anonymous 02.10.2017 / 13:27

2 answers

1

Solution using addEventListener and window.onload (creating <option> dynamically in select of 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>

02.10.2017 / 17:54

Alerting only text of a specific element Remove line break after each INSERT

score 4 · Accepted Answer

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

Whenever the form of payment is changed, check the new value to "enable plots / disable and zero plots"

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>