add select and options within table from 1 click

Question

I have 2 functions that are used to create a new select element, with various options within a table. The number of options is variable, and will be passed through an array. The problem is that I can't get both functions to work by clicking the Add New link. I've explored a number of different methods, but because the HTML is in a table I'm having difficulty adding a row to the table, creating the new select and adding the options at the same time. Thanks if you can help.

I've been testing the code on this link: 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

There are a few things that are working against each other. Every newly made select gets the same ID, this will cause problems. If someone hits the option add, it should also append the options to it.

So my approach is to call on the function initDropDownList. During the creation of the new dropdown, I've attached an unique id. This will be passed to the init function, which appends the options using documentFragment.

Take a look at the following example:

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

I've used some other techniques for this (non jQuery).

• documentFragment

Answer 2

You are creating the element only after the binding. You have to call your method separately.

I have updated your fiddle here

$(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>');
  addOptions();
        return false;
    });
});
function addOptions(){
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";
}

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


});
});