如何在jQuery中使用下拉菜单计算总数

我试图让下拉菜单在下面的代码工作像复选框。当选中复选框时，显示价格，然后显示价格的总和。我还希望在下拉菜单中选择的选项显示价格，并被添加到总数。我的问题是在$('select').change(function() {编码谢谢你的帮助。

感谢见:https://jsfiddle.net/hcanning2012/po4189af/130/

HTML

<table width="100%">
<tr> 
<td>
<label>
<input type="checkbox" name="colorCheckbox" value="n1"> Show Price
</label>
</td>
<td>
<div class="n1 box">200</div>
</td>
</tr>
<tr> 
<td>
<label>
<input type="checkbox" name="colorCheckbox" value="n2"> Show Price
</label>
</td>
<td>
<div class="n2 box">200</div>
</td>
</tr>
<tr> 
<td>
<label>
<input type="checkbox" name="colorCheckbox" value="n3"> Show Price
</label>
</td>
<td>
<div class="n3 box">200</div>
</td>
</tr>
<tr> 
<td>
<label>
<select value="n4" id="n4">
<option value="0" selected>Choose...</option>
<option value="10">item 1</option>
<option value="20">item 2</option>
</select>
</td>
<td>
<div class="n4"></div>
</td>
</tr>

<tr> 
<td>
<label>
<select value="n5" id="n5">
<option value="0" selected>Choose...</option>
<option value="3">item 1</option>
<option value="4">item 2</option>
</select>
</td>
<td>
<div class="n5"></div>
</td>
</tr>

<tr> 
<td > Total: </td><td><div id="sum">0</div></td>
</tr>

CSS

.box {
display: none;
}

jQuery

$(document).ready(function() {
var sum = 0;
$('input[type="checkbox"]').change(function() {
var inputValue = $(this).attr("value");
if(this.checked) {
sum = parseInt(sum) + parseInt($("." + inputValue).text());
}else {
sum = parseInt(sum) - parseInt($("." + inputValue).text());
}
$("#sum").text(sum);
$("." + inputValue).toggle();
});

$('select').change(function() {
var selectValue = $(this).attr("value");
var optionValue = (this.value);
$("." + selectValue).text(optionValue);


if('option:selected',this) {
sum = parseInt(sum) + parseInt($("." + selectValue).text());

}else {
sum = parseInt($("." + selectValue).text());
}

$("#sum").text(sum);
});

});

感谢

<table width="100%">
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n1" value="200" data-rel="div.n1"> Show Price
</label>
</td>
<td>
<div class="n1 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n2" value="200" data-rel="div.n2"> Show Price
</label>
</td>
<td>
<div class="n2 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n3" value="200" data-rel="div.n3"> Show Price
</label>
</td>
<td>
<div class="n3 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n4" data-rel="div.n4">
<option value="0" selected>Choose...</option>
<option value="10">item 1</option>
<option value="20">item 2</option>
</select>
</label>
</td>
<td>
<div class="n4"></div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n5" data-rel="div.n5">
<option value="0" selected>Choose...</option>
<option value="3">item 1</option>
<option value="4">item 2</option>
</select>
</label>
</td>
<td>
<div class="n5"></div>
</td>
</tr>
<tr>
<td> Total: </td>
<td>
<div id="sum">0</div>
</td>
</tr>
</table>

$(function() {
function getTotal() {
var total = 0;
$("input, select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
} else {
$($(el).data("rel")).html($(el).val()).hide();
}
}
});
return total;
}
$('input[type="checkbox"], select').change(function() {
$("#sum").text(getTotal());
});
});