Question

我有2个函数用于创建一个新的select元素，在表中有各种选项。选项的数量是可变的，并将通过数组传递。问题是我无法通过单击“添加新链接”来使两个功能都起作用。我已经探索了许多不同的方法，但由于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，这会导致问题。如果有人点击了选项add，它也应该将选项附加到它。

所以我的方法是调用函数initDropDownList。在创建新下拉列表期间，我附加了一个唯一ID。这将传递给init函数，该函数使用documentFragment附加选项。

看看下面的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

我已经使用了其他一些技术（非jQuery）。

documentFragment

Answer 2

您只在绑定后创建元素。你必须单独调用你的方法。

我已更新您的小提琴here

$tenantLicense.TotalLicenses

从1单击添加表中的选择和选项

2 个答案: