防止选项中的X数字

Question

我有一个脚本在选择列表选项中显示一个数字，当用户检查一个特定值时，它会显示一个数字，表示他可以支付账单的次数。

以下是应该显示的内容：

1. 如果用户选择1个框，他可以最多2次，因此必须显示选项1x和2x;
2. 如果用户选择2个框，他可以最多3次，所以它必须显示选项1x，2x和3x;
3. 如果用户选择3个盒子，他可以最多4倍，所以它必须显示选项1x，2x，3x和4x;
4. 如果用户选择4个框，他最多可以进行6次，因此必须显示选项1x，2x，3x，4x和6x（不应出现5x）;
5. 5盒，最多8倍（不应出现7倍）;
6. 6盒，最多10倍（不应出现9倍）;
7. 7个盒子，最多12x（不应出现11x）;

以下是此脚本代码：

var tabelaParcelas = [];
tabelaParcelas[1] = 2;
tabelaParcelas[2] = 3;
tabelaParcelas[3] = 4;
tabelaParcelas[4] = 6;
tabelaParcelas[5] = 8;
tabelaParcelas[6] = 10;
tabelaParcelas[7] = 12;

$(document).ready(function(){
    update();
});

$('input[type=checkbox]').click(function(){
    update();
})

    function update(){
        var amount2 = 0;
        var options = 0;
        $('#instNum2 option').remove();
        $('.check_list').each(function () {
            if (this.checked) {
                amount2 += Number($(this).val());
                options ++;
            }
            $("input[name=amount]").val("R$"+amount2.toFixed(2));
    });

    if (options > 7) options = 7;
    var i = 0;
    if (options > 0) {
        while (tabelaParcelas[options] != i) {
            if (i != 0) {
            $('#instNum2')
            .append($("<option></option>")
            .attr("value",i+1)
            .text((i+1)+"x"));
            }
            i++;
        }
    }
}

HTML

<table class="table table-striped table-bordered table-hover">
   <thead>
      <th style="text-align: center;">Selecione</th>
      <th style="text-align: center;">Nome</th>
      <th style="text-align: center;">Situação</th>
      <th style="text-align: center;">Parcela</th>
      <th style="text-align: center;">Vencimento</th>
      <th style="text-align: center;">Valor Parcela</th>
      <th style="text-align: center;">Valor Devido</th>
      <th style="text-align: center;">Nome Responsável</th>
    </thead>
    <tbody>
       <?php
         foreach ($result as $value) {
            echo '<tr style="text-align: center;">
                    <td><input style="cursor: pointer;" type="checkbox" value="'. $value['VALORDEVIDO'] .'" class="check_list"></input>
                    <input style="display: none;" type="checkbox" checked="true" value="'. $value['CODIGOPARCELA'] .'" name="numControle"></td>
                     <td>'. utf8_encode($value['NOME']) .'</td>
                    <td>'. $value['SITUACAO'] .'</td>
                    <td>'. $value['PARCELA'] .'</td>
                    <td>'. $value['VENCIMENTO'] .'</td>
                    <td>'. $value['VALORPARCELA'] .'</td>
                    <td>'. $value['VALORDEVIDO'] .'</td>
                    <td>'. utf8_encode($value['NOMERESPONSAVEL']) .'</td>
                    </tr>';
        }

      ?>
   </tbody>
</table>

<select class="form-control" id="instNum2" name="instNum"></select>

  

问题是，脚本一直显示5x，7x，9x和11x，而且1x甚至没有显示，我需要在第1位理解为什么应该出现的那个出现...

有人可以帮助我吗？

Answer 1

请尝试以下代码：

var tabelaParcelas = [1, 2, 3, 4, 6, 8, 10, 12];

$(document).ready(function() {
  update();
});

$('input[type=checkbox]').click(function() {
  update();
})

function update() {
  var list = $('#instNum2'); // use selector only once whenever possible for better performance

  // clear any existing options from the dropdown list
  list.html("")

  // count checked boxes, start from 1 to always include 1 option
  var checked_boxes = 1
  $(".check_list").each(function() {
    if (this.checked) {
      checked_boxes++;
    }
  });

  // append options to the select list
  for (var i = 0; i < checked_boxes; i++) {
    // break the loop to stop creating empty options
    if(i == tabelaParcelas.length){
        break;
    }
    var option = $("<option>", {
      value: tabelaParcelas[i],
      "text": tabelaParcelas[i]
    });
    list.append(option);
  }


}