用javascript隱藏部分表格

我在一個允許我更改我們許可的網站軟件的HTML代碼的應用程序中工作。我遇到了一個問題，即所有的字段都立即顯示出來，並不完全確定如何將它們改變爲僅在被調用時才顯示。我已經在這個場景中看到很多關於Jquery的討論，但是沒有關於這個或者任何應用它的知識，所以我需要用HTML或者嵌入的javascript來完成這個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>

來源

2017-07-10 Nate50112

-1

這些類和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(); 
    } 
})

來源

2017-07-10 19:12:48 JaxCze

看來，因爲這已經被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>

來源

2017-07-10 19:13:35 yoursweater

非jQuery的答案：

使一類被稱爲「隱藏」或東西，把它添加到你希望能夠隱藏所有輸入標籤，並

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

來源

2017-07-10 19:17:10

這是行爲非常簡單，雖然可以用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>

來源

2017-07-10 19:20:16

用javascript隱藏部分表格

回答

相關問題