javascript – 如何通过jQuery生成输入框

2019-06-14 02:24:13 阅读：119 来源： 互联网

假设我有一个下拉框来定义多少行输入框,然后生成指定行的输入框,之后每行输入框附加一个下拉框,它可以定义每行输入框的数量,说明如下：

有人可以建议这个程序的片段吗？

谢谢

解决方法:

我不会为此提供具体的代码片段,但会给你一些提示.他们来了：

>考虑HTML结构(例如,从表单的其余部分单独选择第一个,例如,给表单的其余部分一个< div> with form-dynamic-fields类,这样它将作为动态生成的容器字段),
>使用jQuery的.delegate()函数附加事件(将它们委托给动态字段中的选择框),
>根据特定选择字段的选择,添加,删除或替换适当的行(更改主选择的字段值时)或字段(更改特定行的选择值时),
>你应该使用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 + ']" />');
    }
});

你需要做的是：

>清理代码,
>添加一些样式(所以字段有适当的宽度),
>检查并最终修复< input>的名称属性场,
>修复实施时可能遇到的问题,

我希望它有帮助:)

标签：jquery,javascript
来源： https://codeday.me/bug/20190614/1236727.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何通过jQuery生成输入框