更改下拉列表时更改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-->