使用JavaScript向HTML下拉列表添加选项无效果是什么原因

你的代码核心错误是创建下拉选项时传错了DOM标签名：

• HTML下拉列表的合法选项标签固定为option，你代码里写的document.createElement("pc1")创建的是浏览器无法识别的无效自定义标签，根本不是合法的选项节点，所以哪怕能正常获取到select元素，调用add()方法也不会渲染出有效选项。
• 额外提醒：不建议把addPC()绑定在select的onclick事件上，否则每次点击展开下拉列表都会重复插入相同选项，造成数据冗余。

<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<select name="p1customer" id="p1customer">
<option>Apple</option>
</select>
<button type="button" onclick="addPC()">Insert option</button>
</form>
<script>
function addPC(){
    let selectDom = document.getElementById("p1customer");
    // 创建元素必须指定标签名为option
    let option1 = document.createElement("option");
    option1.text = "myCustomer";
    // 按需给选项设置value属性
    // option1.value = "customer_1";
    selectDom.add(option1);     
}  
</script>   
</body> 
</html>

除了调用select元素的add()方法，也可以直接用通用DOM方法appendChild()追加选项，效果完全一致：

selectDom.appendChild(option1);

如果需要避免重复添加相同选项，可以在插入前遍历现有option，判断text或value是否已存在，再执行插入逻辑。

内容的提问来源于stack exchange，提问作者A.Dim