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

Question

To keep it simple I have 2 form multiple select elements. Depending on the dropdown selected, it will auto hide or show additional input fields.

This is achieved like such:

$(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();
});

My html is:

<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>

Here is the jsfiddle: https://jsfiddle.net/kqjkprc1/

On my live site I actually have more than one form element but I kept it simple with 2 for this example. I notice it only applies the jQuery to the last form element on the page no matter what. Not sure why the first form element is unaffected and won't show/hide the hidden input fields.

Answer 1

On the one hand you can add different form actions like this

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

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

on the other hand you can define differnt submit names

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

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

and get in in the php file like that

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

--- UPDATE ---

ahh ok i think i have a solution for you (first line changes)

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