如何通過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/

希望它幫助你。