在HTML表单上动态添加字段

时间:2015-04-29 12:58:48

标签: jquery html multi-select sumoselect.js

我正在处理简单的表单,用户可以输入文本并为(可选)文本分配标签,因为用户可以选择多个标签我决定使用选择标签"多个"属性。所有工作都按预期进行第一行,但随着我动态添加新元素,所有多个选择框都不会表现为第一行。

  1. 我正在使用SumoSelect / BootStrap-Select JQuery插件使我的多选框看起来更好(https://hemantnegi.github.io/jquery.sumoselect/
  2. 使用bootstrap-select我设法在新添加的行上添加另一行和元素独立于上面的行,但它添加了2个这样的多选框。
  3. 使用SumoSelect,新添加的多选框不响应
  4. 解释起来有点复杂,下面是代码和屏幕截图

    HTML代码:

         <div class="tab-pane fade active in" id="summary">
           <br>
           <a href="#">
                <span id="add_something" class="glyphicon glyphicon-plus" title="add summary" aria-hidden="true"></span>
           </a>
           <br><br>
           <div id="something_tbl">
               <p>Something <span class="user_info" style="padding-left: 5px; color:gray;">Enter something...</span></p>
               <p>
                   <ol>
                        <li style="padding-bottom: 5px;" id="something_pt">
                            <input type="text" style="width: 70%;" placeholder="enter something" id="something" name="something">
                            <select name="something_tags" multiple size="5"
                                    id="lbl_picker" class="selectpicker_1">
                                <option value="1">fun</option>
                                <option value="2">boring</option>
                                <option value="3">hehe</option>
                                <option value="4">lol</option>
                                <option value="5">xyz</option>
                            </select>
                        </li>
                   </ol>
               </p>
           </div>
    

    JQuery的/ JavaScript的:

    $("#add_something").on('click', function() {
      $('#something_tbl ol li#something_pt:first').clone().insertAfter('#something_tbl ol li#something_pt:last');
      $("#something_tbl ol li#something_pt:last #something").val('')
      var elem = $('#something_tbl ol li#something_pt:last');
      elem.append('<a href=\"#\"><span id=\"remove_summary\" title=\"Remove\" class=\"glyphicon glyphicon-minus\" style=\"padding-left: 5px;\"></span></a>');
      add_lbl_picker();
      elem.children('a').click(remove_summary);
      return false;
    });    
    
    var remove_summary = function() {
        var tbl_length = $('#something_tbl ol li#summary_pt').length;
        if (tbl_length > 1) {
            $(this).parents('li').remove();
        }
        return false;
    };
    
    var add_lbl_picker = function() {
        var summary_tbl_length = $('#something_tbl ol li#something_point').length;
        $('#something_tbl ol li#something_point:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);
        $('.selectpicker_' + summary_tbl_length).SumoSelect();
    };
    
    $('.selectpicker_1').SumoSelect();
    

    图片:

    Multi Select not working

    正如您在上面所看到的,首先选择的是多选#34;复制到所有行,除了第1行,所有其他多选不起作用!

    注意:多选中最多5个值不会更多,静态加载值

2 个答案:

答案 0 :(得分:1)

我想你写的地方:

var add_lbl_picker = function() {
    var summary_tbl_length = $('#something_tbl ol li#something_point').length;
    $('#something_tbl ol li#something_point:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);
    $('.selectpicker_' + summary_tbl_length).SumoSelect();
};

你的意思是:

var add_lbl_picker = function() {
    var summary_tbl_length = $('#something_tbl ol li#something_pt').length;
    $('#something_tbl ol li#something_pt:last select#lbl_picker').attr("class", "selectpicker_" + summary_tbl_length);
    $('.selectpicker_' + summary_tbl_length).SumoSelect();
};

我将 something_point 更改为 something_pt

答案 1 :(得分:1)

我认为您的代码中存在一些混淆,无法正确使用属性&#34; class&#34;和&#34; id&#34;。 对于您的脚本,下面的代码完成了这项工作:

<div class="tab-pane fade active in" id="summary">
       <br>
       <a href="#">
            <span id="add_something" class="glyphicon glyphicon-plus" title="add summary" aria-hidden="true">lkjlkjk</span>
       </a>
       <br><br>
       <div id="something_tbl">
           <p>Something <span class="user_info" style="padding-left: 5px; color:gray;">Enter something...</span></p>
           <p>
               <ol>
                    <li style="padding-bottom: 5px;" class="something_pt">
                        <input type="text" style="width: 70%;" placeholder="enter something" class="something" name="something">
                        <select name="something_tags" multiple size="5" class="lbl_picker selectpicker_1">
                            <option value="1">fun</option>
                            <option value="2">boring</option>
                            <option value="3">hehe</option>
                            <option value="4">lol</option>
                            <option value="5">xyz</option>
                        </select>
                    </li>
               </ol>
           </p>
       </div>
    <script>
    $("#add_something").on('click', function() {    
        something_pt_content.clone().insertAfter('.something_pt:last');
        $('.remove_summary:last').click(function(){
            if ($('.something_pt').length > 1) {
                $(this).parents('li').remove();
            }   
        })
        $('.selectpicker_1').SumoSelect();
    });    
    var something_pt_content = $('.something_pt').clone().append('<a href=\"#\"><span title=\"Remove\" class=\"remove_summary glyphicon glyphicon-minus\" style=\"padding-left: 5px;\">oijojoj</span></a>');
    $('.selectpicker_1').SumoSelect();  
    </script>