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

您只需要像制作 table 行一样遍历 NoOfRec

不是循环遍历 100 for (let a = 0; a <= 100; a++) {，而是循环遍历输入数字 for (var a = 1; a <= NoOfRec; a++) {。

更新答案

由于 OP 的评论，我更新了代码以根据 table

生成的 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>

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

JavaScript Limit Drop Down Menu To Number In Input

html

javascript

forms

jquery

onchange