從1點擊表格內添加選擇和選項

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

但是也有一些工作相互幾件事情。每個新創建的select都會獲得相同的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

Answer 2

你只綁定後創建的元素。你必須單獨調用你的方法。

我已經更新了你的提琴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() { 


}); 
});