Question

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

我尝试使用onchange，但无法弄清楚如何使用我在创建下拉菜单的for循环的max标记字段中输入的数字

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

您无需遍历100 for (let a = 0; a <= 100; a++) {，而只需遍历输入数字for (var a = 1; a <= NoOfRec; a++) {。

更新的答案

由于来自OP的评论，我已经更新了代码，以根据表中生成的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限制下拉菜单中输入的数字

1 个答案: