工作需要写一个多级地址组件，支持数据回显：

开发组件的过程中，遇到各种问题。所以专门研究了一下 select，就有了这篇文章。

1 设置 innerHTML 会阻塞进程

代码

<select id="demo"></select>
<script>
	var el = document.getElementById("demo");
	var str = "";
	for (let i = 0; i < 20000; i++) {
		str += `<option value="${i}">${i}</option>`
	}
	str += `<option value="targetValue" id="targetOption">demo</option>`
	el.innerHTML = str;
	alert(document.getElementById('targetOption').value);
</script>

运行结果

结论

走到 alert 的时候，页面中已经有 #targetOption 这个元素了。
说明设置 innerHTML 会阻塞进程，可以放心使用！

2 设置 value 时，value 的变化

设置 value 时，要看能否和 option 匹配上：

• 能。value 值变为设置的值，页面中的 select 也会变。
• 不能。value 会变为""，页面中的 select 也会变为未选中。

<select id="demo">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3" selected>3</option>
	<option value="4">4</option>
</select>
<script>
	var el = document.getElementById("demo");
	alert(el.value); // 弹出 "3"，页面显示"3"
	
	el.value = "1";
	alert(el.value); // 弹出 "1"，页面显示"1"
	
	el.value = "匹配不上";
	alert(el.value); // 弹出 ""，页面显示""
	
	el.value = "2";
	alert(el.value); // 弹出 "2"，页面显示"2"
</script>

3 设置 innerHTML 时，value 的变化

设置 innerHTML 时，无论以前的 value 是否能和新的 option 匹配上，都一律无效。

新的 value 值，只取决于新 option 中有没有 selected 的。有就选中它，没有就选中第一个 option。

例：

<select id="demo">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3" selected>3</option>
	<option value="4">4</option>
</select>
<script>
	var el = document.getElementById("demo");
	alert(el.value); // 弹出 "3"，页面显示"3"
	el.innerHTML = `
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
   `;   
	alert(el.value); 	// 弹出 "2"，页面显示"2"
	el.innerHTML = `
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4" selected>4</option>
   `;
	alert(el.value);	// 弹出 "4"，页面显示"4"
</script>

4 设置 value、innerHTML，都不触发 change 事件