JavaScript Limit Drop Down Menu To Number In Input

Question

I'm trying to get the drop down menu limited to whatever number you put in the max mark input field. E.G. if you put 10 in the max marks input field the drop down menu in the marks field is limited to 10

I tried using onchange but couldn't figure out how to use the number I put in the max mark field in the for loop I have made to create the drop down menu

$(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

You just need to loop thru NoOfRec the same way you are making the table rows

Instead of looping thru 100 for (let a = 0; a <= 100; a++) { you just loop thru the input number for (var a = 1; a <= NoOfRec; a++) {.

Updated answer

Due to comments from OP, I have updated the code to determine the dropdown options based on the input from the max field generated from the table

$(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>