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/