Question

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

因此，当我点击删除选项时，应该在表格中删除整行，并且该选项应该再次出现在选择列表中。

我在表格中添加了选项，但它没有显示为<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>

将调整附加到表格的行，使其在data-link上具有<tr>属性的链接，并将链接设置为值：

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();
});

更新：对于评论中的问题，如何添加多个选定的选项，我刚刚调整了Fiddle

调整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.");
 }
});

$('#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/。

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

2 个答案: