HTML dropdown list issues - html

Question

I'm having issues with the following code:
<form id="form_shower">
<select id="myselect">
<option value="" selected="selected"></option>
<option value="form_name1">Remove the Association</option>
<option value="form_name2">Copy and associate to new form group</option>
<option value="form_name3">Maintain the old association</option>
</select>
</form>
<form name="form_name1" id="form_name1" style="display:none">
Do stuff that removes the association!
</form>
<form name="form_name2" id="form_name2" style="display:none">
New Internal Form Name: <input type="text" name="newinternalformname" value="">
</form>
<form name="form_name3" id="form_name3" style="display:none">
Do stuff to maintain the old association!
</form>
<script>
$("#myselect").on("change", function () {
$("#" + $(this).val()).show().siblings();
})
</script>
Basically, when I select one of the options from the dropdown list, I get what I want (as of now its just test text) but when I select a new option from the list, it appends the data instead of getting rid of what is associated with one of the previously selected options.

Answer 1

It's because the form that contains the dropdown is also a sibling of the form you are showing. Also you have nested forms, which is not allowed
// The first one in this set is always the form with the dropdown
$("#" + $(this).val()).show().siblings()
I would do the following
$("#myselect").on("change", function () {
$(".show-hide").hide();
$("#" + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_shower">
<select id="myselect">
<option value="" selected="selected"></option>
<option value="form_name1">Remove the Association</option>
<option value="form_name2">Copy and associate to new form group</option>
<option value="form_name3">Maintain the old association</option>
</select>
</form>
<form class="show-hide" name="form_name1" id="form_name1" style="display:none">
Do stuff that removes the association!
</form>
<form class="show-hide" name="form_name2" id="form_name2" style="display:none">
New Internal Form Name: <input type="text" name="newinternalformname" value="">
</form>
<form class="show-hide" name="form_name3" id="form_name3" style="display:none">
Do stuff to maintain the old association!
</form>