如何根据从选择框中获取的整数值重复表格数据? [英] How to repeat the form data according to integer value get from the select box.?

问题描述

如何将选择元素(a的值)选择的元素重复多次? 我试图从选择框中获取值，并基于该整数值，应重复该表格.例如，在选择框中，选择 2 表示该表格应显示2次. 我的html代码是:

How can form elements be repeated as many times as chosen by (the value of a) select box? I tried to get the value from the select box and based on that integer value, the form should be repeated. For example in select box, selecting 2 means the form should display 2 times. My html code is:

<select id="sel" class="sel">
<?php
$v=1; 
while($v<=10){
    ?>      
<option value="$v"> <?php echo $v; ?></option>
<?php $v++; } ?></select>
<button class="add_field_button">Add More Fields</button>
<div>name:<input type="text" name="mytext[]"></div>
</div>
<div id="inrlog" style="display:none;">
   <div>name:<input type="text" name="selname"></div>
 </div>

我的Javascript是:

and my Javascript is:

 $(document).ready(function() {
var e = document.getElementById("sel");




$("#sel").select(function(){

   $("#sel").click(function(){
    $("#inrlog").show("slow");
});

});

推荐答案

将事件侦听器附加到select，并根据选择输入的值，要附加的con-cat输入字段和.append()附加到容器中.

Attach an event listener to select and as per the value of the select input, con-cat input field to be appended and .append() in the container.

您可以使用for-loop

 $(document).ready(function() {
   $("#sel").on('change', function() {
     var counter = parseInt(this.value, 10);
     var html = '<div>name:<input type="text" name="selname">\
  </div>';
     var str = "";
     for (var i = 0; i < counter; i++) {
       str += html;
     }
     $("#inrlog").empty().append(str);
   })
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <select id="sel" class="sel">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <button class="add_field_button">Add More Fields</button>
  <div>name:
    <input type="text" name="mytext[]">
  </div>
</div>
<div id="inrlog">
</div>

如果您希望它在按钮上发生，请单击:

If you want it to happen on button click then:

 $(document).ready(function() {
   $(".add_field_button").on('click', function() {
     var counter = parseInt($('#sel').val(), 10);
     var html = '<div>name:<input type="text" name="selname">\
  </div>';
     var str = "";
     for (var i = 0; i < counter; i++) {
       str += html;
     }
     $("#inrlog").empty().append(str);
   })
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <select id="sel" class="sel">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <button class="add_field_button">Add More Fields</button>
  <div>name:
    <input type="text" name="mytext[]">
  </div>
</div>
<div id="inrlog">
</div>

这篇关于如何根据从选择框中获取的整数值重复表格数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！