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>

需要隐藏的其他元素＆＃34;信用卡＆＃34;选择下拉菜单

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

Answer 2

非jQuery回答：

创建一个名为＆＃34; hidden＆＃34;或其他东西，并将其添加到您希望能够隐藏的所有输入标签，并制作

display: none;

然后，使用javaScript，我们可以检查选择了哪个按钮：

var hideElements = document.getElementsByClassName(".hidden") // grabs elements

if(DropDownMin150.value === "1097005"){ //checks if credit card is selected

       hideElements.style.display = "hidden"; //hides the elements

 }
 else if(DropDownMin150.value === "1148142"){ //checks selection

       hideElements.style.display = "block"; // displays the options again.
}

Answer 3

这实际上非常简单，虽然可以使用JQuery完成，但JQuery几乎没有必要，我建议不要使用它，因为没有它就很简单。

您真正需要的是一个CSS类，它将相应的元素定义为隐藏。然后，根据单击的付款方式，可以从相关元素中添加或删除该类。就是这样。

// Get references to elements:
var select = document.getElementById("ctl00_content_CartBilling_ucPaymentMethod_ddlPaymentMethod");
var special = document.getElementById("special");

function CheckPurchaseMethodForNonCC(sel){
  if(sel.value === "2"){
    special.classList.remove("hidden");
  } else {
    special.classList.add("hidden");  
  }
}

/* Adding elements to this class hides them, removing elements from this class 
   reverts them back to their original display value.    */
.hidden { display:none; }

<div id="ctl00_content_CartBilling_ucPaymentMethod_divPaymentMethodText" class="PromptText">
  <span id="ctl00_content_CartBilling_ucPaymentMethod_Stringcontrol1">
    <strong>Choose Payment Method:</strong>
  </span>
  
  <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>
    </select>   
  </div>
</div>

<div id="special" class="hidden">
  Sometimes you'll see me, sometimes you won't!
</div>

Answer 4

这些类和ID的名称太长，选项值也很疯狂。

但这就是你要找的东西

$(document).on('change','#ctl00_content_CartBilling_ucPaymentMethod_ddlPaymentMethod', function() {
  if ($(this).val() == 1097005) {
      $('#ctl00_content_CartBilling_divCostCenterDDL').hide();
  } else {
      $('#ctl00_content_CartBilling_divCostCenterDDL').show();
  }
})

用javascript隐藏表单的各个部分

4 个答案: