JavaScript Ограничить выпадающее меню до числа на входе - PullRequest
Новая
       6

JavaScript Ограничить выпадающее меню до числа на входе

2 голосов
/ 10 февраля 2020

Я пытаюсь ограничить выпадающее меню тем числом, которое вы указали в поле ввода максимальной отметки. Например, если вы введете 10 в поле ввода максимальных отметок, раскрывающееся меню в поле отметок будет ограничено 10

. Я пытался использовать onchange, но не мог понять, как использовать число, введенное в max mark. в поле для l oop я сделал для создания выпадающего меню 

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

1 Ответ

3 голосов
/ 10 февраля 2020

Вам просто нужно l oop через NoOfRec так же, как вы делаете строки таблицы

Вместо циклического перебора по 100 for (let a = 0; a <= 100; a++) { вам достаточно l oop через введенный номер 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>
...