Question

我希望从<option>元素<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>

Answer 1

由于您包含了jQuery标记，因此这是一个jQuery解决方案。

只要您使用jQuery 1.x，就会包含IE8支持。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你已经有了jQuery的答案。所以现在，如果你很好奇它是如何在纯JavaScript中，这里是。正如你所看到的，当然它有点冗长：

＆＃13;

var mySelect  = document.getElementById('myselect'),
    newSelect = document.getElementById('newselect');

while (mySelect.options.length) {
    mySelect.options[0].disabled = true;
    newSelect.add(mySelect.options[0]);
}

＆＃13;

<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>

＆＃13;

如何移动选择元素的值和＆amp;文本到另一个选择元素

2 个答案: