JS中用innerHTML生成<select>的问题-CSDN博客

本文介绍了一种解决HTML中动态生成下拉列表时出现的显示错误的方法。通过改进字符串拼接方式并直接设置innerHTML属性值来确保下拉选项正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<html>
<head>
<script type="text/javascript">
function a(){
	var c = document.getElementById("t1");
	c.innerHTML="<select id='callInfoTitleID' name='callInfoTitleID' "
		+"multiple size='5' style='height:100px;width:100px;' >";
	c.innerHTML+="<option value='1'>"+'aaaa';
	c.innerHTML+="<option value='1'>"+'bbbb';
	c.innerHTML+="<option value='1'>"+'cccc';
	c.innerHTML+="</select>";
}
</script>
</head>
<body >
	<div id='t1'>

	</div>
<input type="button" value="OK" onclick="a()">
</body>
</html>

下拉列表没有选项,选项跑下拉列表列表外面去了.....

后来琢磨了琢磨这样:拼字符串,拼好后再放到innerHTML里


<html>
<head>
<script type="text/javascript">
function a(){
	var c = document.getElementById("t1");
	c.innerHTML="<select id='callInfoTitleID' name='callInfoTitleID' "
		+"multiple size='5' style='height:100px;width:100px;' >";
	c.innerHTML+="<option value='1'>"+'aaaa';
	c.innerHTML+="<option value='1'>"+'bbbb';
	c.innerHTML+="<option value='1'>"+'cccc';
	c.innerHTML+="</select>";
}
function b(){
	var c = document.getElementById("t2");
	var str = "" ;
	str+="<select id='callInfoTitleID' name='callInfoTitleID' "
		+"multiple size='5' style='height:100px;width:100px;' >";

	str+="<option value='1'>"+'aaaa';
	str+="<option value='1'>"+'bbbb';
	str+="<option value='1'>"+'cccc';
	str+="</select>";
	c.innerHTML = str ;
}
</script>
</head>
<body >
	<div id='t1'>

	</div>
	<div id='t2'>

	</div>
<input type="button" value="A" onclick="a()"><br><br><br>
<input type="button" value="B" onclick="b()">
</body>
</html>