HTML dropdown list issues

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.

score 2 · Accepted Answer · edited May 23 '17 at 11:49

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>

I've never seen a script from a url. Is the script right above it the equivalent? — John, Oct 30 '14 at 22:09
@John Never seen a script from a URL? How do you load your jQuery? I'm not really sure what your question is. I changed your HTML and your JavaScript — Ruan Mendes, Oct 30 '14 at 22:15

HTML dropdown list issues

1 Answers1