今天為大家分享一篇js動態設置select下拉菜單的默認選中項實例，具有很好的參考價值，希望對大家有所幫助。
代碼實例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<select id="box">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button id="btn">設置</button>
</body>
</html>
<script>
// 根據指定內容設置下拉框的內容 111|222|333|444
let btn = document.querySelector('#btn')
btn.onclick = () =>{
setselectchooseditem('box','222|我的|她')
}
// 封裝函數
function setselectchooseditem (idStr, text) {
let $id = document.getElementById(idStr)
let str = text
let arr = str.split('|')
let output = ''
for (let i in arr) {
output += `<option value="">${arr[i]}</option>`
}
$id.innerHTML = output
}
</script>