javascript - 一键添加表格中的选择和选项

Question

我有 2 个函数用于创建一个新的选择元素，在一个表中有各种选项。选项的数量是可变的，并将通过数组传递。问题是我无法通过单击添加新链接来使这两个功能都起作用。我已经探索了许多不同的方法，但是因为 HTML 在表格中，所以我很难向表格中添加一行，同时创建新的选择和添加选项。如果您能提供帮助，谢谢。

我一直在测试这个链接上的代码:http://jsfiddle.net/DegTc/30/

$(function() {
    $(".AddItem").click(function() {
  $(this).closest('table').find('tr:last').prev().after('<tr><td><select type="select" class="custom-select custom-select_gray" data-toggle="dropdown" id="dropdownMenuAdded" aria-haspopup="true" aria-expanded="true" style="font-family: \'Work Sans\', Tahoma, Geneva, sans-serif;font-size:10px;color:#606060;text-align:center;width:100px;height:25px;"><option label="Event">Event</option></select></td></tr>');
        return false;
    });
});

$(function() {
    $(".AddOption").click(function() {
var events = [[ "Event 1", "10.04"], [ "Event 2", "30.04"]];
var selId = "dropdownMenuAdded";


initDropdownList(selId, events);
function initDropdownList( id, eventEls ) {
    var select, i, option;

    select = document.getElementById( id );
    for ( i = 0; i < eventEls.length; i++ ) {
        option = document.createElement( 'option' );
        /* alert("eventEls.length: " + eventEls.length);
        alert("eventEls[i]: " + eventEls[i][0] + " " + eventEls[i][1]);*/
        option.value = option.text = eventEls[i][0] + " " + eventEls[i][1];
        select.add( option );
    }
    select.id = "dropdownMenu1";
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><td>
    <select type="select" class="custom-select custom-select_gray" style="font-family:Work Sans, Tahoma, Geneva, sans-serif;font-size:10px;color:#606060;text-align:center;width:100px;height:25px;">
    <option label="Event">Event</option>
    </select>
    </td>
    </tr>
        <tr><td><select type="select" class="custom-select custom-select_gray" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="true" aria-expanded="true" style="font-family:Work Sans, Tahoma, Geneva, sans-serif;font-size:10px;color:#606060;text-align:center;width:100px;height:25px;"><option label="Event">Event</option></select></td></tr>
    <tr>
        <td><a href="javascript:void(0);" id="AddNew" class="AddItem"><i class="i-plus"></i>Add new</a>

        </td>
        <td><a href="javascript:void(0);" id="AddNew" class="AddOption"><i class="i-plus"></i>Add Options</a>

        </td>
    </tr>
</table>

Answer 1

有些事情是相互矛盾的。每个新创建的选择都获得相同的 ID，这会导致问题。如果有人点击选项添加，它也应该将选项附加到它。

所以我的方法是调用函数initDropDownList。在创建新下拉菜单的过程中，我附上了一个唯一的 ID。这将传递给 init 函数，该函数使用 documentFragment 附加选项。

看看下面的例子:

$(function() {

  $(".AddItem").click(function() {

    //declare events inside the click function
    var events = [
      ["Event 1", "10.04"],
      ["Event 2", "30.04"]
    ];

    var selectItem;
    selectItem = 0; //set to zero by default
    if ($("select[id^='dropdownMenu']").length > 0) {
      selectItem = $("select[id^='dropdownMenu']").length; //get all select items from the DOM and get its length to assign the select an unique id.  
    }

    //Add the HTML
    var selectID = "dropdownMenu" + selectItem;
    $(this).closest('table').find('tr:last').prev().after('<tr><td><select type="select" class="custom-select custom-select_gray" data-toggle="dropdown" id="'+selectID+'" aria-haspopup="true" aria-expanded="true" style="font-family: \'Work Sans\', Tahoma, Geneva, sans-serif;font-size:10px;color:#606060;text-align:center;width:100px;height:25px;"><option label="Event">Event</option></select></td></tr>');

    //Init the options
    initDropdownList(selectID, events);
    return false;
  });
});

function initDropdownList(id, eventEls) {
  var select, i, option, docFrag;
  select = document.getElementById(id);
  //let us speed up this proces by using documentfragment
  docFrag = document.createDocumentFragment();
  
  for (i = 0; i < eventEls.length; i++) {
    option = document.createElement('option');
    /* alert("eventEls.length: " + eventEls.length);
    alert("eventEls[i]: " + eventEls[i][0] + " " + eventEls[i][1]);*/
    option.value = option.text = eventEls[i][0] + " " + eventEls[i][1];
    docFrag.appendChild(option); //add the option to the document fragment
  }
  //add the document fragment to the select
  //now all the options will be added in one go, which is more efficient with larger node lists
  select.appendChild(docFrag);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select type="select" class="custom-select custom-select_gray" style="display:none;font-family:Work Sans, Tahoma, Geneva, sans-serif;font-size:10px;color:#606060;text-align:center;width:100px;height:25px;">
    <option label="Event">Event</option>
    </select>
    </td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" id="AddNew" class="AddItem"><i class="i-plus"></i>Add new</a>

    </td>
  </tr>
</table>

为此我使用了一些其他技术(非 jQuery)。

• documentFragment