如何将选定选项动态添加到表格

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