根据 jquery 中 2 个选择列表的选定值动态计算的最佳方法
Best way to dynamically calculate depending on the selected values of 2 select lists in jquery
我一直在尝试动态计算从两个不同的选择列表中选择的值,但我似乎找不到一个好的解决方案。
基本上,2 个选择列表也依赖于 1 个选择列表。
这是我得到的主要选择列表:
<select id="gender" name="">
<option value="_none">- Select a value -</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Both">Both</option>
</select>
根据选择的值,如果选择了 3 个值中的任何一个,则会出现另一个选择框。
这是男性数量指标的选择列表:
<select id="no-of-males" name="">
<option value="_none">- Select a value -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
对于女性:
<select id="no-of-females" name="">
<option value="_none">- Select a value -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
我有一个禁用的文本字段,我根据所选值动态显示计算值(总和)。
<input type="text" name="total" id="total" disabled>
有没有更快、更有效的方法来完成我想要做的事情?
我正在考虑为 3 个选择字段提供一个侦听器,但这对我来说似乎很复杂,因为我仍然是 jquery 的初学者。
在jquery中试试这个
$('#gender').change( function(){
if($(this).val() == 'Male'){
$('#total').val($('#no-of-males').val());
}
if($(this).val() == 'Female'){
$('#total').val($('#no-of-females').val());
}
if($(this).val() == 'Both'){
if($('#no-of-males').val() != '_none')
var m = parseInt($('#no-of-males').val());
else
var m = 0;
if($('#no-of-females').val() != '_none')
var f = parseInt($('#no-of-females').val());
else
var f = 0;
$('#total').val(m + f);
}
});
演示
使用 angularJS :- http://jsfiddle.net/adiioo7/48dLE/
.HTML:-
<div ng-app>
<div ng-controller="myController">
<select id="gender" name="" ng-model="gender">
<option value="_none">- Select a value -</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Both">Both</option>
</select>
<select id="no-of-males" name="" ng-show="gender=='Male'||gender=='Both'" ng-model="male">
<option value="0">- Select a value -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="no-of-males" name="" ng-show="gender=='Female'||gender=='Both'" ng-model="female">
<option value="0">- Select a value -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>Total {{total()}}</div>
</div>
.JS:-
function myController($scope) {
$scope.gender = '_none';
$scope.male = '0';
$scope.female = '0';
$scope.total = function () {
if ($scope.gender == 'Male')
return parseInt($scope.male);
else if ($scope.gender == 'Female')
return parseInt($scope.female);
else if ($scope.gender == 'Both')
return parseInt($scope.male) + parseInt($scope.female);
return 0;
};
}
相关文章:
- 使用javascript动态计算top属性
- 使用phpjavascript动态计算输入字段
- 根据 jquery 中 2 个选择列表的选定值动态计算的最佳方法
- threejs - 仅使用 THREE 即可动态计算相机位置.点
- 动态计算并显示所有 tr 元素的总和
- 如何动态计算 iframe 的高度
- 真实用例动态(计算)属性
- oracle顶点表格形式的动态计算:sys.htp.p
- Javascript/Ajax/Jquery在更改时动态计算表单
- 所选列表手推车难度中的动态计算
- 文本框中的动态计算
- Javascript使用一个函数动态计算多行
- 我如何动态计算正确的RGB颜色与背景颜色的对比
- 动态计算一个链接到一系列按钮的TextView
- 动态计算输入值
- 动态计算模板字面量
- 动态计算图像3mm出血
- 在Javascript中动态计算溢出量
- li高度的动态计算
- 使用JavaScript动态计算元素填充