如何將選定選項動態添加到表格

Question

我想將選擇列表中的選定選項添加到具有自動創建的每行刪除選項的表格中。

所以，當我點擊刪除選項時，整個行應該在表中刪除，該選項應該再次在選擇列表中可用。

我在表中添加了select選項，但它不顯示爲<td>，而是顯示爲<option>。

Answer 1

我剛剛調整了Fiddle並刪除了添加的行。兩次調整 - 爲了方便起見，我添加了添加的選項值作爲數據值屬性的添加的行並添加類中刪除的Del列：

var row = $('<tr data-value="' + opt.val() + '"><td>' + opt.val() + 
      '</td><td></td><td class="delete">Del</td></tr>'); 

然後我說下面的函數從deletd添加選項行和刪除該行：

$("#selectDistriList").on("click", ".delete", function() { 
    dVal = $(this).closest("tr").data("value"); 
    $("#distriList").append('<option value="' + dVal + '">' 
     + dVal + '</option>'); 
    $(this).closest("tr").remove(); 
}); 

更新：對於是否有可能將鏈接添加到每個選項的註釋的問題我剛剛調整了Fiddle一些示例鏈接。
以下調整：我爲每個選項添加了屬性data-link，例如，

<option value="A" data-link="http://www.stackoverflow.com">A</option> 

，將被附加到該表中的行被調整爲具有鏈路爲對<tr>data-link屬性並設置鏈接到值：

var row = $('<tr data-value="' + opt.val() + '" data-link="' 
      + opt.data("link") + '"><td><a href="' + opt.data("link") 
      + '" target="_blank">' + opt.val() + '</a></td><td></td> 
      <td class="delete">Del</td></tr>'); 

上刪除該行的功能單擊調整爲刪除行的data-link值設置爲一個附加選項：

$("#selectDistriList").on("click", ".delete", function() { 
    dVal = $(this).closest("tr").data("value"); 
    dLink = $(this).closest("tr").data("link"); 
    $("#distriList").append('<option value="' + dVal + '" data-link="' 
    + dLink + '">' + dVal + '</option>'); 
    $(this).closest("tr").remove(); 
}); 

更新：對於在評論中如何添加多個選擇選項的問題我剛剛調整爲add功能Fiddle

如下調整：

$('#Add').click(function() { 

if ($('#distriList option:selected').val() != null) { 
    $('#distriList option:selected').each(function() 
    { 
     var tempSelect = $(this).val(); 
     var inbtn = $('#Include').val(); 
     var opt = $('#distriList option[value=' + tempSelect + ']').remove(); 
     var row = $('<tr data-value="' + opt.val() + '" data-link="' + opt.data("link") + '"><td><a href="' + opt.data("link") + '" target="_blank">' + opt.val() + '</a></td><td></td><td class="delete">Del</td></tr>'); 
     row.appendTo('#selectDistriList'); 
     $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected"); 
     $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected"); 
     $("#selectDistriList").val(tempSelect); 
    });  
} 
else 
{ 
    alert("Before add please select any position."); 
} 
}); 

而是隻增加$('#distriList option:selected')的，因爲這隻會增加第一個選擇的選項.each()將遍歷所有選定的選項並添加它們。

參考：http://api.jquery.com/each/

Answer 2

要添加<option>標籤表，但它需要<tr>：

var opt = $('#distriList option:selected').remove(); 
var row = $('<tr><td>' + opt.val() + '</td><td>Add</td><td>Del</td></tr>'); 
row.appendTo('#selectDistriList'); 

見更新的jsfiddle：http://jsfiddle.net/c8q2sggn/1/。