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/

jQuery多选show show不适用于所有选择元素

1 个答案: