根据select选项计算输入值

时间:2016-03-26 03:19:31

标签: jquery html

是否有人知道有助于我了解如何执行以下操作的链接。我已经用Google搜索了一些帮助,但找不到具体的答案。

我有以下设置。

<div class="information">
<input class="name" type="text" placeholder="Name">
<input class="income" id="input_1_income" type="text" placeholder="After Tax Income">
<select class="option">
    <option>Week 1</option>
    <option>Week 2</option>
</select>
</div>

我的页面上有6个。带占位符的输入&#34;税后收入&#34;都有不同的身份证;数字从1变为6。

我尝试做的是根据本周的选择选项(第1周或第2周)将输入的数字加在一起,然后该答案将显示在其中一个以下输入。

<div id="div2">

    <div class="time">
    <input class="finance" type="text"> <br>
    <label>Week 1</label>
    </div>

    <div class="time">
    <input class="finance" type="text"> <br>
    <label>Week 2</label>
    </div>

    <div class="time">
    <input class="finance" type="text"> <br>
    <label>Fortnightly</label>
    </div>

    <div class="time">
    <input class="finance" type="text"> <br>
    <label>Yearly</label>
    </div>

</div>

因此,基本上所有第1周的值将被加在一起并显示在第1周输入中,所有第2周的值都加在一起并显示在输入中。然后我需要一起计算第1周和第2周并将其显示在每两周一次的输入中,然后将每两周一次的输入乘以26并将该答案显示在年度输入中。

我一直在寻找一些jQuery来帮助解决这个问题,但无济于事。我对jQuery非常陌生,所以对正确的链接或材料的指导一般都是祝福。

感谢。

1 个答案:

答案 0 :(得分:0)

这是一个让你入门的例子:

jsFiddle to play with

&#13;
&#13;
$('select').change(function(){
		updateDiv2();
});
function updateDiv2(){
	wSel=0, ati=0, wk1=0, wk2=0;
	$('select').each(function(){
			ati = $(this).prev().val(); //.income
			ati = (ati>0)?ati:0; //if empty, make value zero (prevent NaN)

			if (this.value.split(' ')[1] == 1){
				wk1 = parseInt(wk1) + parseInt(ati);
			}else{
				wk2 = parseInt(wk2) + parseInt(ati);
			}
			$('#ttl_wk1').val(wk1);
			$('#ttl_wk2').val(wk2);
	});
}
&#13;
.time {overflow:hidden;}
.time input{float:left;}
.time label{float:left;width:80px;text-align:right;}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="information">
	<input class="name" type="text" placeholder="Name">
	<input class="income" id="input_1_income" type="text">
	<select class="option">
		<option>Week 1</option>
		<option>Week 2</option>
	</select>
</div>
<div class="information">
	<input class="name" type="text" placeholder="Name">
	<input class="income" id="input_1_income" type="text">
	<select class="option">
		<option>Week 1</option>
		<option>Week 2</option>
	</select>
</div>
<div class="information">
	<input class="name" type="text" placeholder="Name">
	<input class="income" id="input_1_income" type="text">
	<select class="option">
		<option>Week 1</option>
		<option>Week 2</option>
	</select>
</div>
<div id="div2">
	<div class="time">
		<label>Week 1</label>
		<input id="ttl_wk1" class="finance" type="text"> <br>
	</div>
	<div class="time">
		<label>Week 2</label>
		<input id="ttl_wk2" class="finance" type="text"> <br>
	</div>
	<div class="time">
		<label>Fortnightly</label>
		<input id="ttl_fn" class="finance" type="text"> <br>
	</div>
	<div class="time">
		<label>Yearly</label>
		<input id="ttl_yr" class="finance" type="text"> <br>
	</div>
</div>
&#13;
&#13;
&#13;