テーブル内の選択とオプションを1クリックから追加

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

互いに不利に働いているいくつかのものがあります。新しく作られたすべてのselectが同じIDを取得すると、問題が発生します。誰かがオプションaddにヒットした場合、そのオプションにもオプションを追加する必要があります。

私のアプローチは、関数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() { 


}); 
});