jQuery динамическое создание полей ввода на основе номера, выбранного в раскрывающемся меню?

Question

Я пытаюсь сделать что-то вроде этого:

http://devblog.jasonhuck.com/assets/infiniteformrows.html

Но ... Я хочу отобразить раскрывающееся поле выбора со значениями от 1 до 20, и в зависимости от того, какое значение выбрано в этом поле, сколько полей ввода я покажу пользователю для заполнения на странице ( без обновления, конечно).

Итак, если я выберу 4 в раскрывающемся списке (изначально поля ввода не отображаются, по умолчанию должно быть 0), прямо под ним должны быть созданы 4 строки полей ввода для имени и адреса электронной почты, все с уникальными идентификаторами. и такие (для хранения в mysql).

И что касается меня, я не могу найти никаких примеров того, как кто-то делал именно это, поэтому я решил вместо этого представить здесь небольшое испытание.

Заранее спасибо!

Answer 1

Все, что вам нужно сделать, это выяснить, какое число выбрано, когда пользователь меняет раскрывающийся список, затем выполнить цикл по этому номеру, создавая два поля ввода для каждой итерации.

$("#selectBox").change(function() {
  var htmlString = "";
  var len = $("options:selected", this).val();
  for (var i = 0; i < len; i++) {
    htmlString += "<input type='text' class='email'>";
    htmlString += "<input type='text' class='name'>";
  }
  $("#outputArea").html(htmlString);
}

И вы, возможно, даже захотите сделать его умнее, чтобы он проверял, сколько полей ввода у вас уже есть, а затем вносил только столько, сколько необходимо, или удалял некоторые. Таким образом, это будет немного быстрее (:

Answer 2

Это вставит текстовое поле после выбора на странице. Он будет срабатывать при каждом изменении номера.

var idFun = 0;
$('select').change(function() { 
  var end=$(this).val(); 
  for (var i=0;i<end;i++) {
    $('<div><input id="fun' + (idFun++) + ' type="text" ></div>').appendTo($('#myinputs'));

  }
});

HTML:

<select>
  ... 1 to 20 here
</select>
<div id="myinputs"></div>

Надеюсь, это поможет.

Answer 3

Реальное решение:

<script type="text/javascript">

    $(document).ready(function() {

        $("#AantalAntw").change(function() {
            var htmlString = "";
            var len = $("#AantalAntw").val();
            for (var i = 0; i < len; i++) {
                htmlString += "<input type='text' class='email'>";
                htmlString += "<input type='text' class='name'>";
            }
            alert(htmlString);
            $("#antwblok").html(htmlString);
        });
    });

</script>