假设我在 html 表单中有 5 个选择,但您只能从其中 3 个中选择选项。我需要完成以下任务:1.计算总价,2.动态传递等于所选选项的名称 attr 的设置变量(最终将传递给 PHP 的 json)。
我遇到的问题是我在每个选项上都使用值=“1”。然后通过使用 if else 静态分配变量来定义每次选择另一个选项时更新的价格。在我所做的每个选择中都有很多选项可供选择。
我被困的地方: 要么我要使用 name 属性并传递 5 个变量(使用 option:selected),要么有一种方法可以完成此操作,这样我的数据库只需要 3 列而不是 5 列来存储到数据库中。
我希望在页面上的脚本中完成此操作,而不是在 PHP 中。您可以动态地执行此操作,并且只发送超过 3 个 JSON 变量以传递给 php,还是发送超过 5 个变量会更容易、更快?是的,我对 javascript 和 jquery 很陌生:)
<form id = "testform" name = "testform" method="POST" action="test.php">
<select class = "choose" id="choice1">
<option value="0" selected=""></option>
<option value="1"> Choice 1.a</option>
</select>
<select class = "choose" id="choice2">
<option value="0" selected=""></option>
<option value="1"> Choice 1.b</option>
</select>
<select class = "choose" id="choice3">
<option value="0" selected=""></option>
<option value="1"> Choice 1.c</option>
</select>
<select class = "choose" id="choice4">
<option value="0" selected=""></option>
<option value="1"> Choice 1.d</option>
</select>
<select class = "choose" id="choice5">
<option value="0" selected=""></option>
<option value="1"> Choice 1.b</option>
</select>
<label><h4>Total:$</h4> <input style="" type="number" class="num" name="amount" value="0.00" readonly="readonly" /></label>
<script type="text/javascript">
$('select').change(function(){
var form = this.form;
var sum = 0;
var price;
$('select :selected').each(function() {
sum += Number($(this).val());
});
if (sum > 3) {
alert("You can only choose 3 classes");
$('select.choose').each(function() {
$('.choose').val(0);
});
}
if (sum == 1){
price = 80;
}
else if (sum == 2) {
price = 130;
}
else if (sum == 3) {
price = 180;
}
$(".num").val(price);
form.elements['total'] = price;
});
最佳答案
检查有多少个 select 的值不为 0,确保它不超过 3,然后获取这些 select 的名称
$('select').on('change', function(){
var selected = $('select').filter(function() {
return parseInt(this.value, 10) !== 0;
}),
sum = selected.length,
price = [80, 130, 180][sum - 1],
names = selected.map(function() {
return this.id; // selects don't seem to have names ?
}).get();
if (sum > 3) {
alert("You can only choose 3 classes");
} else {
$('.num').val(price);
}
console.log(names, sum)
});
关于javascript - 计算用户从多个选择中选择了多少个选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29442592/