更改下拉列表時更改HTML表格的值

Question

如何在有人將下拉列表更改爲其他值時更新HTML表格？

我有一個域名註冊的價格表，我希望用戶能夠選擇他們想從一個下拉菜單中註冊域名的年數以及表格的價格更新。

任何資源或建議，非常感謝！

<div class="domain-pricing-block"> 
 
\t <div class="container"> 
 
\t \t <div class="domain-pricing-head"> 
 
\t \t \t <h3>Domain Pricing</h3> 
 
\t \t \t <p>Includes DNS Management and Domain Forwarding</p> 
 
\t \t </div><!--domain-pricing-head--> 
 
\t \t <div class="domain-pricing-table"> 
 
\t \t \t <div class="table-responsive"> 
 
\t \t \t \t <div class="table"> 
 
\t \t \t \t \t <table class="table"> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>TLD</th> 
 
\t \t \t \t \t \t \t <th>Register</th> 
 
\t \t \t \t \t \t \t <th>Transfer</th> 
 
\t \t \t \t \t \t \t <th>Renew</th> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>.com</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>.net</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>.org</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>.biz</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td>$14.95 USD</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div><!--domain-pricing-table--> 
 
\t \t <div class="domain-price-type"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <label>Registration Period:</label> 
 
\t \t \t \t \t <div class="box"> 
 
\t \t \t \t \t \t <select class="wide"> 
 
\t \t \t \t \t \t \t <option value="1">1 Year</option> 
 
\t \t \t \t \t \t \t <option value="2">2 Years</option> 
 
\t \t \t \t \t \t \t <option value="3">3 Years</option> 
 
\t \t \t \t \t \t \t <option value="4">4 Years</option> 
 
\t \t \t \t \t \t </select> 
 
\t \t \t \t \t </div><!--domain-ext--> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <input type="button" class="dom-go" value="Go"> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div><!--domain-price-type--> 
 
\t </div> 
 
</div><!--domain-pricing-block-->

我提供的表格的屏幕截圖，以及：

Answer 1

由於你沒有給我們太多與我要去上班使用固定公式工作。

將基本價格作爲數據屬性存儲在表格單元格中。價格修飾符以類似的方式針對選擇選項進行存儲。在選擇的變化，表格單元更新price x period x modifier

$(document).ready(function(){ 
 
//Cache the Table Cells 
 
    var priceTableCells = $(".domain-pricing-table table td[data-base]"); 
 
    /*console.log(priceTableCells);*/ 
 

 
//Event Handler For Select Change 
 
    $("#registrationPeriod").change(function(){ 
 
     var period = parseFloat($(this).val()); 
 
     var modifier = $(this).find(":selected").data("modifier");  
 
     
 
     //Iterate cells and update them 
 
     $(priceTableCells).each(function(){ 
 
     var base = $(this).data("base"); 
 
     $(this).text("$" +(base * period * modifier).toFixed(2) + " USD"); 
 
     });  
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="domain-pricing-block"> 
 
\t <div class="container"> 
 
\t \t <div class="domain-pricing-head"> 
 
\t \t \t <h3>Domain Pricing</h3> 
 
\t \t \t <p>Includes DNS Management and Domain Forwarding</p> 
 
\t \t </div><!--domain-pricing-head--> 
 
\t \t <div class="domain-pricing-table"> 
 
\t \t \t <div class="table-responsive"> 
 
\t \t \t \t <div class="table"> 
 
\t \t \t \t \t <table class="table"> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>TLD</th> 
 
\t \t \t \t \t \t \t <th>Register</th> 
 
\t \t \t \t \t \t \t <th>Transfer</th> 
 
\t \t \t \t \t \t \t <th>Renew</th> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>.com</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>.net</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>.org</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>.biz</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t \t <td data-base="14.95">$14.95 USD</td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div><!--domain-pricing-table--> 
 
\t \t <div class="domain-price-type"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <label>Registration Period:</label> 
 
\t \t \t \t \t <div class="box"> 
 
\t \t \t \t \t \t <select class="wide" id="registrationPeriod"> 
 
\t \t \t \t \t \t \t <option value="1" data-modifier="1">1 Year</option> 
 
\t \t \t \t \t \t \t <option value="2" data-modifier="0.9">2 Years</option> 
 
\t \t \t \t \t \t \t <option value="3" data-modifier="0.8">3 Years</option> 
 
\t \t \t \t \t \t \t <option value="4" data-modifier="0.75">4 Years</option> 
 
\t \t \t \t \t \t </select> 
 
\t \t \t \t \t </div><!--domain-ext--> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <input type="button" class="dom-go" value="Go"> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div><!--domain-price-type--> 
 
\t </div> 
 
</div><!--domain-pricing-block-->