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>