Question

我不确定是否有人可以帮助我，但我现在有一个＆lt;选择菜单＆gt;使用onchange，在切换时显示2种不同的形式。问题是我在表单外部还有一个更新按钮，并且在表单更改时也尝试更改按钮。

下面是我的代码。任何人都可以帮我解决这个问题。

JavaScript：

隐藏/显示

function changelocation(val) {
    var id = val;
    //alert(id);
    if (id == '1') {
        $('#tr_1').css('display', 'table-row');
        $('#tr_2').css('display', 'none');
    }
    if (id == '2') {
        $('#tr_2').css('display', 'table-row');
        $('#tr_1').css('display', 'none');
    }
}

显示表格中的保存按钮

$（document）.ready（function（）{ $（＆＃34;＃location1_update＆＃34;）。click（function（）{ $（＆＃34;＃LOCATION1＆＃34）提交（）; }）; }）;

$(document).ready(function () {
    $("#location2_update").click(function () {
        $("#location2").submit();
    });
});

按钮

<input class="submit-button" type="submit" name="location1_update" value="Update">
<input class="submit-button" type="submit" name="location2_update" value="Update">

＆LT;选择菜单＆gt; - 使用聪明的笔记 - 这很好。

<select class="selmenu-wo" name="company_locations" onChange="changelocation(this.value)">
    <option value="1" selected="selected">{section name=r loop=$location1}{$location1[r].LOCATION}
&nbsp;&nbsp;{/section}</option>
    <option value="2">{section name=q loop=$location2}{$location2[q].LOCATION}&nbsp;&nbsp;{/section}
    </option>
</select>

形式。

<form action="" id="location1" name="location1" method="POST">
<table  cellpadding="0" id="tr_1"  cellspacing="0">
<tr> <td><b>Name</b></td>

<input name="test" type="text" value="Test data">

</td></tr>
</table>
</form>

<form action="" id="location2" name="location2" method="POST">
<table  cellpadding="0" id="tr_2" style="display:none" cellspacing="0">
<tr> <td><b>Name</b></td>

<input name="test2" type="text" value="Test data">

</td></tr>
</table>
</form>

表单切换正常，但我希望它在切换时显示按钮。如果我将相同的id分配给表单，只按钮切换按钮。

Answer 1

使用

$("#location1_update").hide()

和

$("#location1_update").show()

表示隐藏并显示按钮。更改此html whit id而不是名称

<input class="submit-button" type="submit" id="location1_update" value="Update">
<input class="submit-button" type="submit" id="location2_update" value="Update">

那么js可能是

if (id == '1') {
    $('#tr_1').css('display', 'table-row');
    $('#tr_2').css('display', 'none');
    $("#location1_update").show();
    $("#location2_update").hide();

}
if (id == '2') {
    $('#tr_2').css('display', 'table-row');
    $('#tr_1').css('display', 'none');
    $("#location2_update").show();
    $("#location1_update").hide();
}

Answer 2

将相同的类添加到按钮和表单中，例如：

<input class="submit-button location1" type="submit" name="location1_update" value="Update">
<input class="submit-button location2" type="submit" name="location2_update" value="Update">

<form action="" id="location1" class="location1" name="location1" method="POST">
<form action="" id="location2" class="location2" name="location2" method="POST">

然后像这样显示/隐藏它们：

function changelocation(val) {
    var id = val;
    if (id == '1') {
        $('.location1').show();
        $('.location2').hide();
    }
    if (id == '2') {
        $('.location2').show();
        $('.location1').hide();
    }
}

使用选择菜单onChange隐藏/显示多个按钮

2 个答案: