如何通过jQuery生成输入框

Question

假设我有一个下拉框来定义输入框有多少行，然后生成指定的输入框行，之后每行输入框附上一个下拉框，它可以定义输入每行有多少框，如下图所示：

可能有人建议在此过程中的片段？

感谢

Answer 1

我不会给你这个特定的片断，但会给你，而不是一些小技巧。在这里，他们是：

1. 想想HTML结构，这（例如单独首先从表格的其余部分进行选择，例如，给予的形式<div>与form-dynamic-fields类，所以它会作为一个容器的剩余部分。动态生成的字段），
2. 使用jQuery的.delegate()功能附加事件（他们委托给动态字段中选择框），
3. 根据具体选择字段的选择，添加，删除或替换相应的行（改变主时选择的字段值）或字段（当改变特定行的选择值时），
4. 您应该使用onchange事件。 .delegate()功能的

实施例的使用可以是这样的：

jQuery('.form-dynamic-fields').delegate('select', 'change', function(event){ 
    var fields_in_a_row = jQuery(this).val(); // how many fields in current row 
    // insert or remove appropriate number of fields for current row here 
}); 

，它将用于动态尽量生成作为容器每<select>领域工作与类form-dynamic-fields保持它们的父元素，并且不会被删除。

所以，给你关于你如何构建你的形式线索，如何连接事件，他们应该做什么，你应该用什么事件，我想......

...鼓励你测试不同的解决方案并分享有关解决此问题所取得的进展的信息。

编辑：

一些工作示例鼓励你多（见jsFiddle）：

• HTML：

  <form class="form-dynamic" action="" method="post"> 
      <select name="number_of_rows"> 
       <option>0</option> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
      </select> 
      <div class="form-dynamic-fields"> 
  
      </div> 
  </form> 
  

• 的JavaScript（执行onDomReady）：

  jQuery('.form-dynamic').delegate('select[name="number_of_rows"]', 'change', function(event){ 
      var field_template = '<input type="text" name="row[]" /><br />'; 
      var howmany = parseInt(jQuery(this).val()); 
      var container = jQuery(this).parent('.form-dynamic').find('.form-dynamic-fields').empty(); 
      if (howmany > 0){ 
       for (i=1; i<=howmany; i++){ 
        container.append(jQuery('<div class="form-dynamic-row"><input type="text" name="rows[' + i +'][]" /> <select name="rows_counts[]" data-row-id="' + i + '"><option>1</option><option>2</option><option>3</option><option>4</option></select></div>')); 
       } 
      } 
  }); 
  
  jQuery('.form-dynamic').delegate('select[name="rows_counts[]"]', 'change', function(event){ 
      var parent = jQuery(this).parent('.form-dynamic-row'); 
      parent.find('input[type="text"]').remove(); 
      var howmany = jQuery(this).val(); 
      var row_id = jQuery(this).attr('row-id'); 
      for (i=1; i<=howmany; i++){ 
       parent.prepend('<input type="text" name="rows[' + row_id + '][' + i + ']" />'); 
      } 
  }); 
  

你需要做的是：

• 干净的代码，
• 添加一些样式（这样的字段有适当的宽度），
• 检查，最终确定的name属性<input>字段，
• 修复执行它时可能遇到的问题，

我希望它有帮助:)

Answer 2

不让你做你的功课对SO社区来说不是一件好事，但我无法抗拒这一点。我很抱歉的人。

在线演示：http://jsfiddle.net/E46P5/

var input = '<input type="text" />'; //input html 
var select = '<select>'+ //select html 
        '<option value="0"></option>'+ 
        '<option value="1">1</option>'+ 
        '<option value="2">2</option>'+ 
        '<option value="3">3</option>'+ 
        '<option value="4">4</option>'+ 
        '<option value="5">5</option>'+ 
       '</select>'; 

var row = '<p>'+ input + select + '</p>'; //row html 
var container = $("#container"); //cache selector for better performance 
var i = 0; // variable used in loop 

$("#rowNumber").change(function(){ //when the main select changes 
    var numRows = $(this).val(); //get its value 

    container.html(""); //empty the container 

    for(i=1; i<= numRows; i++){ 
     container.append(row); //and append a row from 1 to the numRows 
    } 
    }); 
    container.delegate('p > select','change',function(){ //when a select inside 
     //a row changes 
     var numInputs = $(this).val(); //get its value 
     var parent = $(this).parent(); //select its parent 
     var width = 170/numInputs; 
     parent.html(""); //empty it 
     for(i=1; i<=numInputs; i++){ 
      parent.append(input); //append an input from 1 to the numINputs 
     } 
     parent.append(select); //and append a select 
    }); 

Althought我无法得到的输入的宽度取决于他们连续在内线有多少。

Answer 3

这是一个工作解决方案。

下面是HTML：

<select onchange="javascript:local.drop1Change(this);" > 
    <option value="-">select item</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<div id="workArea"></div> 

那么一些javascript：

<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    var local = {}; 
    local.changeInner = function (containerId, ctrl) { 
    var target = $("#" + containerId); 
    target.empty(); 
    var len = $(ctrl).val(); 
    for (q = 0; q < len; q = q + 1) { 
     var el = document.createElement("input"); 
     target.append(el); 
    } 
    target.append(ctrl); 
}; 
local.drop1Change = function (ctrl) { 
    var selectedValue = $(ctrl).val(); 
    var len = selectedValue; 
    var area = $("#workArea"); 
    area.empty(); 
    for (x = 0; x < len; x=x+1) { 
     var container = document.createElement("div"); 
     var el = document.createElement("input"); 
     container.id = "container" + x; 
     var s1 = document.createElement("span"); 
     $(s1).html('<select style="margin:2px 2px 2px 2px;"  
     onchange="javascript:local.changeInner(\'' + container.id + '\', this);"> <option value="1" selected>1</option><option value="2">2</option><option value="3">3</option></select>'); 
     $(container).append(el); 
     $(container).append(s1); 
     area.append(container); 
    } 
}; 
</script> 

Answer 4

这里是一个非常简单而有效的方式使用jQuery来做到这一点。您可以轻松使用此代码来添加/减少下拉菜单中的选项数量，并且您可以轻松地将ID /类名称编辑为其他内容并对其进行设置。这是非常灵活的方式来做到这一点！它根据您有多少（class =“input-1”或class =“input-2”）命名输入，以便您可以使用这些名称来设置CSS中的宽度。

HTML：

<select id="dropdown"><option></option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select> 

<div id="myForm"> 
</div> 

JQuery的：

$(document).ready(function() { 
    $('#dropdown').change(function() { 
     $('#myForm').empty(); 
     for (var i=0; i<$('#dropdown').val(); i++) { 
      $('#myForm').append('<div class="inputGroup"><input type="input" class="input" /><select class="select"><option></option><option value="1">1</option><option value="2">2</option></select></div>');   
     } 
     $('select').bind('change', changeInputs); 
    }); 
}); 

function changeInputs() { 
    var string; 
    string = ""; 
    for (var i=0; i<$(this).val(); i++) { 
     string = string + '<input type="input" class="input-'+$(this).val()+'" />'; 
    }  
    $(this).parents('.inputGroup').html(string + '<select class="select"><option></option><option value="1">1</option><option value="2">2</option></select>'); 
    $('select').bind('change', changeInputs); 
} 

随意对它进行测试：http://jsfiddle.net/Ag6GD/2/

希望它帮助你。