javascript - 在没有页面加载的情况下多次操作 DOM 中的选择选项选定值

Question

我处于一个不幸的境地，我需要能够复制整个 HTML block ，而无需使用 javascript/jquery 重新加载页面，包括输入和选择。

我已经完成了大部分工作，但我对选择感到困惑。为了使其正确“复制”，以便副本显示其复制来源的选定值，我需要在选择的副本上显式设置属性“选定”。问题是，如果我更改要从中复制的选择上的值，则先前选择的“selected”属性仍然存在，并且我不知道如何摆脱它。

这是 fiddle 的链接，下面是向您展示我的意思的基本测试:fiddle 。您需要检查选择列表上的元素并显示所有选项标签。

1. 做出选择
2. 点击 Enter 按钮
3. 观察所选属性并选择您选择的选项
4. 选择其他选项
5. 点击输入按钮
6. 观察现在有两个选项具有选定的属性。此时我需要删除第 3 步观察中选定的属性

HTML:

<table>
  <tr>
    <td>
      <select>
        <option value="">Select One</option>    
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
        <option value="test3">Test3</option>
        <option value="test4">Test4</option>    
      </select>
    </td>
  </tr>
</table>
<button onclick="enterTest()">Enter</button>

Javascript

function enterTest(){
    var $selectedOption = $("select").children(":selected");
    $selectedOption.attr("selected","selected");
}

Answer 1

无需处理option和selected属性。

如果值是唯一的，

var $select = $("select");
function enterTest(){
    $select.clone().val($select.val()).appendTo('body');
}

Demo

否则，使用selectedIndex:

$select.clone().prop('selectedIndex', $select.prop('selectedIndex'))

Demo