Как мога да преместя стойностите и текста на избрания елемент към друг избран елемент - javascript, jquery

Искам да получа <option> стойности и текст от a <select> елемент #myselect, и го добавете към друг <select> елемент #newselect. Стойността и текстът, предадени на втория елемент за избор, #newselect, също трябва да бъде деактивирано. Бих искал поддръжка за IE 8+.

<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>

Вземете горното, деактивирайте ги и ги добавете към долу:

<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>

Отговори:

Тъй като включихте маркера jQuery, тук има решение jQuery.

Докато използвате jQuery 1.x, е включена поддръжка на IE8.

$("#myselect option").each(
function() {
$(this).prop("disabled", true).appendTo("#newselect");
}
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>

<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select> 

Вече имате отговор на jQuery. Така че сега, ако ви е интересно как може да бъде в чист javascript, ето го. Както можете да видите, разбира се, това е малко по-подробно:

var mySelect  = document.getElementById("myselect"),
newSelect = document.getElementById("newselect");

while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}

<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>

<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>