fist i select any option from fist select menu, then press on add button to get new select menu at this time the fist selected option is switches to default, how to prevent it…
JavaScript
x
23
23
1
<body id = "body">2
<button onclick="add()">Add</button>3
<select>4
<option selected disabled>Choose</option>5
<option value="c1"> one </option>6
<option value="c13"> two </option>7
<option value="c11"> three </option>8
<option value="c12"> four </option>9
</select>10
</body>11
<script>12
let body = document.getElementById('body');13
function add(){14
body.innerHTML += `<select>15
<option selected disabled">Choose...</option>16
<option value="c1"> one </option>17
<option value="c13"> two </option>18
<option value="c11"> three </option>19
<option value="c12"> four </option>20
</select>`;21
}22
</script>23
https://jsfiddle.net/zala_jaydipsinh/34b95dq2/1/
Advertisement
Answer
Try like this:
JavaScript
1
11
11
1
let body = document.getElementById('body');2
3
function add() {4
body.insertAdjacentHTML(`beforeend`, `<select>5
<option selected disabled">Choose...</option>6
<option value="c1"> one </option>7
<option value="c13"> two </option>8
<option value="c11"> three </option>9
<option value="c12"> four </option>10
</select>`)11
}JavaScript
1
10
10
1
<body id="body">2
<button onclick="add()">Add</button>3
<select>4
<option selected disabled>Choose</option>5
<option value="c1"> one </option>6
<option value="c13"> two </option>7
<option value="c11"> three </option>8
<option value="c12"> four </option>9
</select>10
</body>insertAdjacentHTML() does this without overwriting the content of the body element.