Как добавить выбранный параметр в таблицу динамически

Question

Я хочу добавить выбранную опцию в список выбора в таблицу с параметром delete для каждой строки, созданной автоматически.

Поэтому, когда я нажимаю кнопку «Удалить», вся строка должна быть удалена в таблице, и эта опция должна быть снова доступна в списке выбора.

Я добавил параметр выбора в таблицу, но он не отображается как <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(); 
}); 

Update: на вопросе в комментариях, если это возможно, чтобы добавить ссылку на каждый вариант я только регулировал 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(); 
}); 

Update: На вопрос в комментариях, как добавить несколько выбранных вариантов я просто настроил 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/.