基于下拉菜单中的选择显示/隐藏窗体字段

Posted 2021-02-25

Show a form field if 1 value from a dropdown is chosen, hide is the other is chosen. Can be extended to include more fields and values. Could get messy if you start nesting more than 2 'if else' but it gets the job done.

$(document).ready(function() {
	$('#form-btw').hide(); //hide field on start
 
	$('#Klant').change(function() {
 
	 var $index = $('#Klant').index(this);
 
	 if($('#Klant').val() != 'professional') { //if this value is NOT selected
	 $('#form-btw').hide(); //this field is hidden
	 } 
	 else {
	 $('#form-btw').show();//else it is shown
 
	 }
        });
 });
 
---
 
<select name="Klant" id="Klant">
  <option id="field-particulier" value="particulier">Particulier</option>
  <option id="field-professional" value="professional">Professional</option>
</select>
 
<input name="BTW" type="text" class="form-text" id="BTW" />