Как копировать <option> от одного <select> другому?

Я использую двухсторонний выбор, найденный здесьhttp://www.stevefenton.co.uk/cmsfiles/assets/File/twosidedmultiselect.html и нужно добавить выбранные параметры в правой части мультиселекции в другой список выбора с помощью JQuery. Кто-нибудь должен был сделать это раньше и знает быстрый способ сделать это?

var selectedOptions = $("#myselect")[0].options; получит варианты, но как записать их на другой выбор?

 pixelator28 мая 2012 г., 10:28
Ааааа, нажми на галочку!

Ответы на вопрос(4)

Есть еще более простой способ сделать это:

var options = $("#myOldSelect").html();
$('#myNewSelect').html(options);

Это очень удобно, если вы хотите добавить новый Select в DOM с уже скопированными опциями:

var options = $("#myOldSelect").html();
$("#domLocation").append("<select id='myNewSelect'>" + options + "</select");
$('#cloneBtn').click(function() {
    var $options = $("#myselect > option").clone();
    $('#second').empty();
    $('#second').append($options);
    $('#second').val($('#myselect').val());
});

Это используется для копирования значения и innerHTML.    Лучше скопировать ключ, значение и OPTIONS.i.e. выбранное значение и параметры.

 29 июл. 2018 г., 08:53
@ Thomas.Benz Вы можете прочитать это -jquery clone
 27 мар. 2018 г., 16:11
Это мой любимый ответ. Спасибо. Кстати, у меня есть к вам вопрос. Зачем вам нужна строка кода: var $ options = $ (& quot; #myselect & gt; option & quot;). Clone (); ?
 15 нояб. 2017 г., 07:52
хороший ответ. Он продолжает выбирать в новом окне выбора.
<select multiple="true" class="multiselect1" name="myselecttsms1">
    <option value="1" rel="0" title="One">One</option>
    <option value="2" rel="1" title="Two">Two</option>            
    <option value="4" rel="3" title="Four">Four</option>
    <option value="5" rel="4" title="Five">Five</option>
    <option value="6" rel="5" title="Six">Six</option>
</select>

<select multiple="true" class="multiselect2" name="myselecttsms2" size="6">

</select>

<button class="add">Add</button>
<button class="addAll">Add All</button>
<button class="remove">Remove</button>
<button class="removeAll">Remove All</button>

jQuery:

$('.add').on('click', function() {
    var options = $('select.multiselect1 option:selected').sort().clone();
    $('select.multiselect2').append(options);
});
$('.addAll').on('click', function() {
    var options = $('select.multiselect1 option').sort().clone();
    $('select.multiselect2').append(options);
});
$('.remove').on('click', function() {
    $('select.multiselect2 option:selected').remove();
});
$('.removeAll').on('click', function() {
    $('select.multiselect2').empty();
});

Образец тренировки

 21 февр. 2013 г., 18:15
отлично. Я думаю, мы можем немного подправить его, чтобы опция добавлялась в правую часть только один раз.
Решение Вопроса
var $options = $("#myselect > option").clone();

$('#secondSelectId').append($options);

Live DEMO

 01 авг. 2017 г., 13:50
@ Гдорон какой-нибудь намек на то, как? :)
 01 авг. 2017 г., 13:46
и что делать, если вы хотите скопировать определенное число для элементов из списка источников? Например ... если в исходном списке есть пункты 1-19, и мы должны были скопировать только элемент до выбранного элемента?
 01 авг. 2017 г., 13:49
@asad скопировать только те, просто измените селектор.
 pixelator29 мая 2012 г., 15:46
Хорошо, теперь это работает с помощью $ (). Ready (function () {$ (& # apos; # primaryGroup & apos;). Click (function () {return! $ (& Amp; #myselect option & apos;). AppendTo (& apos; # primaryGroup & apos) ;);}); $ ('a # # editgroup & apos;). click (function () {return! $ (& apos; #primaryGroup option.moveme & apos;). appendTo (& apos; # myselect & apos;);});}); но ... событие щелчка в chrome работает только при втором щелчке, очевидно, это известная ошибка, кто-нибудь знает способ обойти это?
 pixelator28 мая 2012 г., 11:27
Привет Два действительно хороших решения, но я ищу варианты, которые добавляются в динамически создаваемый второй выбор, то есть тот, который создается двухсторонним плагином множественного выбора, они также добавляются в другое меню выбора на странице, тем самым давая оба одинакового содержания.

Ваш ответ на вопрос