更改下拉列表时更改HTML表的值

Question

当有人将下拉列表更改为其他值时，如何更新HTML表格？

我有域名注册的定价表，我希望用户能够选择他们想要从下拉列表中注册域名多少年，并且表格的价格会更新。

非常感谢任何资源或建议！

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

我也提供了表格的截图：

Answer 1

因为你没有给我们太多的工作，我会使用固定的公式。

基本价格作为数据属性存储在表格单元格中。以类似方式针对选择选项存储价格修改器。在选择更改时，表格单元格会在price x period x modifier

上更新

＆＃13;

＆＃13;

$(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");
      });    
    });

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;