javascript - 使用javascript隐藏部分表单

Question

我在一个应用程序中工作，该应用程序允许我更改我们许可的网站软件的 HTML 代码。我遇到了一个问题，因为所有字段都同时显示，并且不完全确定如何将它们更改为仅在需要时显示。我已经看到很多关于此场景的 Jquery 的讨论，但对此一无所知，也不知道如何应用它，因此我需要在 HTML 单元格内仅使用 HTML 或嵌入式 javascript 来完成此操作。非常感谢任何帮助!

In the image below, I have included a screenshot of the form that I am working with as well as the code below. Basically, Payment Method has two options: Credit card or department charge, and when credit card is selected I need the three additional options to disappear (Cost center, Full Account Number and USPS Postage method) and when Department charge is selected for them to show up again.

下面我附上了它们各自元素的代码。

选择付款方式:

<div id="ctl00_content_CartBilling_ucPaymentMethod_divPaymentMethodText" class="PromptText">

<strong><span id="ctl00_content_CartBilling_ucPaymentMethod_Stringcontrol1"><b>Choose Payment Method:</b></span></strong>

支付方式选择器

<div id="ctl00_content_CartBilling_ucPaymentMethod_divDdlPaymentMethod" class="SideMargin20">
<select name="ctl00$content$CartBilling$ucPaymentMethod$ddlPaymentMethod" id="ctl00_content_CartBilling_ucPaymentMethod_ddlPaymentMethod" class="DropDownMin150" onchange="CheckPurchaseMethodForNonCC( this );">
<option selected="selected" value="2">Credit Card</option>
<option value="11">Departmental Charge (enter number below)</option>

当下拉菜单的“信用卡”选择处于事件状态时需要隐藏的其他元素

<div id="ctl00_content_CartBilling_divCostCenterDDL" class="SideMargin20">
                    <select name="ctl00$content$CartBilling$ddlCostCenter" onchange="javascript:setTimeout('__doPostBack(\'ctl00$content$CartBilling$ddlCostCenter\',\'\')', 0)" id="ctl00_content_CartBilling_ddlCostCenter" class="DropDownMin150">
<option selected="selected" value="0"></option>
<option value="1097005">1 - Credit Card</option>
<option value="1148142">2 - Account Charge</option>

<tr>
        <td colspan="3">
            <div id="w2p_form"><table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td><div class="PromptText"><strong><span>Full Account Number:</span></strong>  <span>(All Products)</span></div></td></tr><tr><td><div class="SideMargin20"><input name="CustomOrderField_69773" type="text" id="CustomOrderField_69773" size="50" maxlength="50" runat="server" onkeyup="SetItemLevelCustomOrderFieldTextBoxes(this, 'txtItemLevelCustomOrderField1');"></div></td></tr><tr><td><div class="PromptText"><strong><span>Postage Method (If applicable):</span></strong>  <span>(All Products)</span></div></td></tr><tr><td><div class="SideMargin20"><select name="CustomOrderField_69806" onchange="SetItemLevelCustomOrderFieldDropDown(this, 'ddlItemLevelCustomOrderField2');" id="CustomOrderField_69806" size="1" runat="server" align="top" style="vertical-align:top;width:122.8841px;">
<option value="12557~^&amp;USPS Bulk">USPS Bulk</option>
<option value="12590~^&amp;USPS First Class">USPS First Class</option>

Answer 1

似乎已经回答了这个问题 here .这是解决方案:

<script type="text/javascript">
function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}
</script>


<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>