jQuery多選select show hide不適用於所有select元素

Question

爲了保持簡單，我有2個表單多選元素。根據所選的下拉菜單，它會自動隱藏或顯示其他輸入字段。

這是實現像這樣：

$(document).ready(function(){ 
    $("#find-replace1 select").change(function(){ 
     $("select option:selected").each(function(){ 
      if($(this).attr("value")=="Find/Replace"){ 
       $(".rep1").hide(); 
       $(".find1").show(); 
       $(".replace1").show(); 
      } else { 
       $(".rep1").show(); 
       $(".find1").hide(); 
       $(".replace1").hide();     
      } 
     }); 
    }).change(); 
}); 

$(document).ready(function(){ 
    $("#find-replace2 select").change(function(){ 
     $("select option:selected").each(function(){ 
      if($(this).attr("value")=="Find/Replace"){ 
       $(".rep2").hide(); 
       $(".find2").show(); 
       $(".replace2").show(); 
      } else { 
       $(".rep2").show(); 
       $(".find2").hide(); 
       $(".replace2").hide();     
      } 
     }); 
    }).change(); 
}); 

我的HTML是：

<p> 
<form method="POST" action="#" accept-charset="UTF-8"> 
    <div id="find-replace1" class="form-group-a"> 
     <select class="form-control" name="priceaction"> 
      <option value="Append">Append</option> 
      <option value="Prepend">Prepend</option> 
      <option value="Replace">Replace</option> 
      <option value="Find/Replace">Find/Replace</option> 
     </select> 
    </div> 
    <div class="form-group-a"> 
     <input class="form-control formwidth rep1" autocomplete="off" name="value" type="text" style="display: block;"> 
    </div> 
    <div class="form-group-a"> 
     <input class="form-control formwidth find1" autocomplete="off" placeholder="find this" name="find" type="text" style="display: none;"> 
    </div>     
    <div class="form-group-a"> 
     <input class="form-control formwidth replace1" autocomplete="off" placeholder="replace with" name="replace" type="text" style="display: none;"> 
    </div>          
    <div class="clear"></div> 

    <input type="submit" value="Update"> 
</form> 
</p> 
<hr> 
<p> 
<form method="POST" action="#" accept-charset="UTF-8"> 
    <div id="find-replace2" class="form-group-a"> 
     <select class="form-control" name="priceaction"> 
      <option value="Append">Append</option> 
      <option value="Prepend">Prepend</option> 
      <option value="Replace">Replace</option> 
      <option value="Find/Replace">Find/Replace</option> 
     </select> 
    </div> 
    <div class="form-group-a"> 
     <input class="form-control formwidth rep2" autocomplete="off" name="value" type="text" style="display: block;"> 
    </div> 
    <div class="form-group-a"> 
     <input class="form-control formwidth find2" autocomplete="off" placeholder="find this" name="find" type="text" style="display: none;"> 
    </div>     
    <div class="form-group-a"> 
     <input class="form-control formwidth replace2" autocomplete="off" placeholder="replace with" name="replace" type="text" style="display: none;"> 
    </div>          
    <div class="clear"></div> 

    <input type="submit" value="Update"> 
</form> 
</p> 

這裏是的jsfiddle：https://jsfiddle.net/kqjkprc1/

在我的生活網站，我其實有一個以上的表單元素但在這個例子中，我保持簡單。我注意到它只將jQuery應用於頁面上的最後一個表單元素，無論如何。不知道爲什麼第一個表單元素不受影響，並且不會顯示/隱藏隱藏的輸入字段。

Answer 1

，一方面可以在另一方面這樣

<form method="POST" action="update_1.php" > 
</form> 

<form method="POST" action="update_2.php"> 
</form> 

添加不同形式的行動，你可以定義不同的充提交的名稱

<form method="POST" action="#" > 
<input type="submit" name="form1"> 
</form> 

<form method="POST" action="#" > 
<input type="submit" name="form2"> 
</form> 

，並獲得在PHP文件一樣，

if (!empty($_POST['form1'])) { 
//do something here for form 1; 
} 
if (!empty($_POST['form2'])) { 
//do something here for form 2; 
} 

--- UPDATE ---

啊好吧我想我有你的解決方案（第一線的變化）

$("option:selected", this).each(function(){ 
     if($(this).attr("value")=="Find/Replace"){ 
      $(".rep1").hide(); 
      $(".find1").show(); 
      $(".replace1").show(); 
     } else { 
      $(".rep1").show(); 
      $(".find1").hide(); 
      $(".replace1").hide();     
     } 
    }); 

https://jsfiddle.net/kqjkprc1/1/