计算用户从多个文件中选择的选项数量

Count how many options a user chooses from multple selects

本文关键字：选择 选项 文件 用户 计算      更新时间：2023-09-26

假设我在html表单中有5个选项，但您只能从其中3个选项中选择。我需要完成以下工作：1。计算一个总价，2。动态传递与所选选项的名称attr相等的集合变量（最终将传递给jsonforPHP）。

我遇到的问题是，我在每个选项上都使用value="1"。然后定义价格，每次他们选择另一个选项时，都会通过静态地为变量赋值if-else来更新价格。在我正在做的事情中，每个选择都有很多选项可供选择。

我被困的地方：要么我将使用name属性并传递5个变量（使用选项：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;
});

检查有多少个选择的值不是0，确保不超过3，然后获取这些选择的名称

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

FIDDLE

相关文章：