php - jQuery 多重选择显示隐藏不适用于所有选择元素

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/

在我的实时网站上，我实际上有多个表单元素，但在本示例中我使用 2 个表单元素来保持简单。我注意到无论如何它只将 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;
}

--- 更新 ---

啊，好吧，我想我有一个适合你的解决方案(第一行更改)

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