javascript - 防止选项中的X数字

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

这是应该显示的内容：


如果用户选择1个框，则最多可以做2倍，因此必须显示选项1x和2x；
如果用户选择2个框，则他最多可以做3倍，因此必须显示1x，2x和3x选项；
如果用户选择3个框，则最多可以做4倍，因此必须显示选项1x，2x，3x和4x；
如果用户选择4个框，则他最多可以做6倍，因此必须显示选项1x，2x，3x，4x和6x（不应出现5x）；
5盒，最大8倍（不应出现7倍）；
6盒，最大10倍（不应出现9倍）；
7盒，最大12倍（不应出现11倍）；


这是脚本代码：

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甚至没有显示，我需要了解int 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);
  }


}