HTML выпадающего списка вопросы

Question

У меня возникли проблемы со следующим кодом:

<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> 

В принципе, когда я выбираю один из вариантов из выпадающего списка, я получаю то, что я хочу (как сейчас его просто тест текст), но когда я выбираю новую опцию из списка, она добавляет данные вместо того, чтобы избавиться от того, что связано с одним из ранее выбранных параметров.

Answer 1

Это потому, что форма, содержащая выпадающий список, также является родным братом формы, которую вы показываете. Также у вас есть вложенные формы, which is not allowed

// The first one in this set is always the form with the dropdown 
$("#" + $(this).val()).show().siblings() 

Я хотел бы сделать следующее

$("#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>