如何通过jQuery生成输入框

时间：2011-06-24 02:42:42

标签： javascript jquery

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

enter image description here

有人可以建议此程序的代码段吗？

由于

4 个答案:

答案 0 :(得分：4)

我不会为您提供具体的代码段，但会给您一些提示。他们在这里：

  1. 为此考虑HTML结构（例如，从表单的其余部分单独选择第一个，例如。给表单的其余部分<div>添加form-dynamic-fields类，这样它就可以作为一个容器对于动态生成的字段），
  2. 使用jQuery的.delegate()函数附加事件（将它们委托给动态字段中的选择框），
  3. 根据特定选择字段的选择，添加，删除或替换适当的行（更改主选择的字段值时）或字段（更改特定行的选择值时），
  4. 您应该使用onchange事件。

    5. .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>属性
    • 修复实施时可能遇到的问题，

    我希望它有所帮助:)。

答案 1 :(得分：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
    });

虽然我无法得到输入的宽度取决于它们在一行中的数量。

答案 2 :(得分：1)

这是使用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/

希望它帮助你。

答案 3 :(得分：0)

这是一个有效的解决方案。

这是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>
相关问题
最新问题