在HTML表单上动态添加字段

Question

我正在处理简单表单，用户可以在其中输入文本并将标记分配给（可选）文本，因为用户可以选择多个标记，我决定使用具有“多个”属性的选择标记。所有预期的第一行的作品，但随着我动态添加新的元素，所有多个选择框不表现为第一行。

1. 我使用SumoSelect /自举选择的jQuery插件，使我的多选框更好看
2. 自举选我设法添加其他行和元素上新添加的行以上独立工作排的，但它添加了2个这样的多选框。
3. 随着SumoSelect，新加入的多选框没有响应

它有点复杂解释，所以下面是代码和屏幕截图

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(); 

图片：

正如你可以在上面看到，什么都在第一个“多选择”选择复制到所有行，除了第1行中的所有其他多选择Do不行！

注：会有多最大的5个值选择不和值静态加载

Answer 1

我认为你的代码在属性“class”和“id”的正确使用方面存在一些混淆。 您的脚本，下面的代码做这项工作：

<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> 

Answer 2

我想，你写道：

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。