JavaScript 将下拉菜单限制为输入中的数字

Question

我正在尝试将下拉菜单限制为您在最大标记输入字段中输入的任何数字。例如。如果您在最大标记输入字段中输入 10，则标记字段中的下拉菜单将限制为 10

我尝试使用 onchange，但不知道如何使用我在 for 循环的最大标记字段中输入的数字来创建下拉菜单

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

function load(){
    $("#txtNoOfRec").focus();

    $("#btnNoOfRec").click(function () {
        $("#AddControll").empty();
        var NoOfRec = $("#txtNoOfRec").val();

        if(NoOfRec > 0) {
            createControll(NoOfRec);
        }
    });
}



function createControll(NoOfRec) {
    var tbl = "";

    tbl = "<table>"+
               "<tr>"+
                   "<th> Section </th>"+
                   "<th> Max </th>"+
                   "<th> Comment </th>"+
                   "<th> Marks </th>"+
               "</tr>";

    for (i=1; i<=NoOfRec; i++) {
        tbl += "<tr>"+
                        "<td>"+
                            "<input type='text' id='txtSection' placeholder='Section' autofocus/>"+
                        "</td>"+
                        "<td>"+
                            "<input type='text' id='txtMax' placeholder='Max' />"+
                        "</td>"+
                         "<td>"+
                            "<input type='text' id='txtComment' placeholder='Comment' />"+
                        "</td>"+
                        "<td>"+
                            "<select id='ddlMarks'>";
        for (let a = 0; a <= 100; a++) {
          tbl += "<option>" + a + "</option>";

        }
        tbl += "</select>"+
                        "</td>"+
                    "</tr>";
    }
    tbl += "</table>";

    $("#AddControll").append(tbl);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="dvMain">
    <label id="lblNoOfRec"> Enter No Of Rows</label>
    <input type="text" id="txtNoOfRec"/>
    <input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>

Answer 1

您只需像制作表格行一样循环通过NoOfRec

您只需循环输入数字for (var a = 1; a <= NoOfRec; a++) {，而不是循环通过 100 for (let a = 0; a <= 100; a++) {。

更新答案

由于来自 OP 的 cmets，我已更新代码以根据表中生成的 max 字段的输入来确定下拉选项

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

function load() {
  $("#txtNoOfRec").focus();

  $("#btnNoOfRec").click(function() {
    $("#AddControll").empty();
    var NoOfRec = $("#txtNoOfRec").val();

    if (NoOfRec > 0) {
      createControll(NoOfRec);
    }
  });
  
  $("#AddControll").on( "keyup", ".txtMax", function() {
    var $this = $(this);
    
    // get the input value
    var l = parseInt( $this.val() );
    
    // if input is a number then append items in dropdown
    if( typeof l == 'number' ) {
      // find the row parent tr and get the dropdown element then empty it first
      var $marks = $this.closest('tr').find('.ddlMarks');
      $marks.empty();
      
      // add dropdown items based on input
      for (var j = 0; j < l; j++) {
        $marks.append("<option>" + j + "</option>");
      }
    }
  } );
}

function createControll(NoOfRec) {
  var tbl = "";

  tbl = "<table>" +
    "<tr>" +
    "<th> Section </th>" +
    "<th> Max </th>" +
    "<th> Comment </th>" +
    "<th> Marks </th>" +
    "</tr>";

  for (i = 1; i <= NoOfRec; i++) {
    // ID must be unique, updated ID on inputs/select to use class instead
    tbl += "<tr>" +
      "<td>" +
      "<input type='text' class='txtSection' placeholder='Section' autofocus/>" +
      "</td>" +
      "<td>" +
      "<input type='text' class='txtMax' placeholder='Max' />" +
      "</td>" +
      "<td>" +
      "<input type='text' class='txtComment' placeholder='Comment' />" +
      "</td>" +
      "<td>" +
      "<select class='ddlMarks'>";
    for (var a = 0; a < 100; a++) {
      tbl += "<option>" + a + "</option>";
    }

    tbl += "</select>" +
      "</td>" +
      "</tr>";
  }
  tbl += "</table>";

  $("#AddControll").append(tbl);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="dvMain">
  <label id="lblNoOfRec"> Enter No Of Rows</label>
  <input type="text" id="txtNoOfRec" />
  <input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>