Mark Alexa Mark Alexa - 1 month ago 10
jQuery Question

Manipulate DOM on change() of select element

What I'm trying to do is hide() certain forms when the page loads up and depending on what user selects from the list of options forms would appear for user to fill them out.

Was inspired by this post jQuery: How do i trigger event / do something when select option is selected? thus it should be doable. Well in programming anything is doable if you know how

jQuery bit:

$(document).ready(function() {
$('#select').change(function() {
while ($(this).val() == "--") {
$("#form1").hide("fast");
$("#form2").hide("fast");
$("#form3").hide("fast");
$("#form3a").hide("fast");
$("#form4").hide("fast");
$("#form5").hide("fast");
}
if ($(this).val() == "form1") {
$("#form1").show();
$("#form2").hide();
$("#form3").hide();
$("#form3a").hide();
$("#form4").hide();
$("#form5").hide();
} else if ($(this).val() == "form2") {
$("#form2").show();
$("#form1").hide();
$("#form3").hide();
$("#form3a").hide();
$("#form4").hide();
$("#form5").hide();
} else if ($(this).val() == "form3") {
$("#form3").show();
$("#form3a").show();
$("#form2").hide();
$("#form4").hide();
$("#form5").hide();
$("#form1").hide();
} else if ($(this).val() == "form4") {
$("#form4").show();
$("#form2").hide();
$("#form3").hide();
$("#form3a").hide();
$("#form4").hide();
$("#form5").hide();
}
}

});
});


html skeleton looks like this:

<select class="select" name="randomName">
<option value="--">--</option>
<option value="form1">form1</option>
<option value="form2">form2</option>
<option value="form3">form3</option>
<option value="form4">form4</option>
</select>


I can get it hide but for some reason program ignores the condition when it supposed to show up again and shows them all consistently.

Answer

Your current code should not work at all. You are calling $('#select').changewhich will look for an element with the id select which you dont have, your element has the class select.

That said, the below approach would be much simpler.

Basically,

  • we start with all the forms hidden with CSS
  • then, the handler will listen for changes to the select element
  • on change, it will hide all of the forms
  • then show only the form whose id starts with the value that was selected

Notes:

  • This .replace(/(form\d+)[a-z]*$/,'$1') is using a regular expression to remove the letters that come after the number of the form
  • This $('[id^=' + formId+']') selects any forms that start with the selected value (minus the letters we removed) this ensures that selecting form3 or form3a will show both forms.
  • If you have more than 9 forms, ie, you get up to form10, this will not work, we'll need to change the approach, let me know

$('.select').change(function() {
  var formId = $(this).val().replace(/(form\d+)[a-z]*$/,'$1');
  $('.forms').hide(); 
  $('[id^=' + formId+']').show(); 
});
.forms {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" id="mySelect" name="randomName">
  <option value="--">--</option>
  <option value="form1">form1</option>
  <option value="form2">form2</option>
  <option value="form3">form3</option>
  <option value="form3a">form3a</option>
  <option value="form4">form4</option>
  <option value="form5">form5</option>
</select>

<form action="" id="form1" class="forms">
  <input type="text" placeholder="form1">
</form>


<form action="" id="form2" class="forms">
  <input type="text" placeholder="form2">
</form>


<form action="" id="form3" class="forms">
  <input type="text" placeholder="form3">
</form>


<form action="" id="form3a" class="forms">
  <input type="text" placeholder="form3a">
</form>

<form action="" id="form4" class="forms">
  <input type="text" placeholder="form4">
</form>

<form action="" id="form5" class="forms">
  <input type="text" placeholder="form5">
</form>

Comments