selected 选项在通过 javascript 添加新的 select 菜单后保持切换到默认设置

Question

fist i select fist select 菜单中的任何选项，然后按添加按钮获得新的 select 菜单，此时 fist selected 选项是切换到默认值，如何防止它...

<body id = "body">
    <button onclick="add()">Add</button>
    <select>
        <option selected disabled>Choose...</option>
        <option value="c1"> one </option>
        <option value="c13"> two </option>
        <option value="c11"> three </option>
        <option value="c12"> four </option>
    </select>
</body>
<script>
    let body = document.getElementById('body');
    function add(){
        body.innerHTML += `<select>
        <option selected disabled">Choose...</option>
        <option value="c1"> one </option>
        <option value="c13"> two </option>
        <option value="c11"> three </option>
        <option value="c12"> four </option>
    </select>`;
    }
</script>

https://jsfiddle.net/zala_jaydipsinh/34b95dq2/1/

Answer 1

这样试试：

let body = document.getElementById('body');

function add() {
  body.insertAdjacentHTML(`beforeend`, `<select>
        <option selected disabled">Choose...</option>
        <option value="c1"> one </option>
        <option value="c13"> two </option>
        <option value="c11"> three </option>
        <option value="c12"> four </option>
    </select>`)
}

<body id="body">
  <button onclick="add()">Add</button>
  <select>
    <option selected disabled>Choose...</option>
    <option value="c1"> one </option>
    <option value="c13"> two </option>
    <option value="c11"> three </option>
    <option value="c12"> four </option>
  </select>
</body>

insertAdjacentHTML() does this without overwriting the content of the body element.

selected 选项在通过 javascript 添加新的 select 菜单后保持切换到默认设置

selected option keep switching to the default after adding new select menu through javascript

javascript

drop-down-menu