如何动态地将所选选项添加到表中

how to add selected option to a table dynamically

本文关键字：选项 添加 何动态 动态      更新时间：2023-09-26

我想将选择列表中的选定选项添加到自动创建的每行带有删除选项的表中。

因此，当我单击删除选项时，应该在表中删除整行，并且该选项应该再次在选择列表中可用。

我在表格中添加了选择选项，但它没有显示为<td>，而是显示为<option>。

我刚刚调整了小提琴，并提供了删除添加的行的选项。两个调整 - 为方便起见，我将添加的选项值作为数据值属性添加到添加的行中，并将类删除添加到Del列：

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

然后我添加了以下函数以从删除行中添加选项并删除该行： 

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

更新：对于评论中的问题，是否可以为每个选项添加一个链接，我刚刚用一些示例链接调整了小提琴。
以下调整：我为每个选项添加了属性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功能进行以下调整： 

$('#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.");
 }
});

.each()不是只添加只会添加第一个选定选项的$('#distriList option:selected')，而是遍历所有选定的选项并添加它们。

供参考：http://api.jquery.com/each/

您要将<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/。

相关文章：