JavaScript onChange异常：表单提交时未正确赋值给#form_state输入框

问题根源 #

你代码中的onchange事件绑定存在语法错误：通过字符串拼接生成事件逻辑时，alert内的赋值语句未处理字符串边界，导致触发ReferenceError，中断了整个事件处理流程，进而无法完成对#form_state的赋值。

修复方案 #

改用函数绑定onchange事件，避免字符串拼接的语法陷阱，同时简化重复的赋值逻辑：

修复后的完整JavaScript代码 #

// 州选项数据
var stateOptions = [{
"AL":"Alabama",
"AK":"Alaska",
"AZ":"Arizona",
"AR":"Arkansas",
"CA":"California",
"CO":"Colorado",
"CT":"Connecticut",
"DC":"District of Columbia",
"DE":"Delaware",
"FL":"Florida",
"GA":"Georgia",
"HI":"Hawaii",
"ID":"Idaho",
"IL":"Illinois",
"IN":"Indiana",
"IA":"Iowa",
"KS":"Kansas",
"KY":"Kentucky",
"LA":"Louisiana",
"ME":"Maine",
"MD":"Maryland",
"MA":"Massachusetts",
"MI":"Michigan",
"MN":"Minnesota",
"MS":"Mississippi",
"MO":"Missouri",
"MT":"Montana",
"NE":"Nebraska",
"NV":"Nevada",
"NH":"New Hampshire",
"NJ":"New Jersey",
"NM":"New Mexico",
"NY":"New York",
"NC":"North Carolina",
"ND":"North Dakota",
"OH":"Ohio",
"OK":"Oklahoma",
"OR":"Oregon",
"PA":"Pennsylvania",
"RI":"Rhode Island",
"SC":"South Carolina",
"SD":"South Dakota",
"TN":"Tennessee",
"TX":"Texas",
"UT":"Utah",
"VT":"Vermont",
"VA":"Virginia",
"WA":"Washington",
"WV":"West Virginia",
"WI":"Wisconsin",
"WY":"Wyoming"
}];

// 创建并插入select元素的函数
function createSelectElement(options, insertBeforeId) {
    var selectElement = document.createElement("select");
    // 保留原样式设置
    selectElement.style.position = 'absolute';
    selectElement.style.top = '20px';
    selectElement.style.left = '0';
    selectElement.style.width = '100%';
    selectElement.style.height = '25px';
    selectElement.style.lineHeight = '20px';
    selectElement.style.margin = '0';
    selectElement.style.padding = '0';
    selectElement.style.border = '0';
    
    // 改用函数绑定onchange，避免字符串拼接错误
    selectElement.onchange = function() {
        var selectedText = this.options[this.selectedIndex].text;
        document.getElementById('form_state').value = selectedText;
        alert(selectedText);
    };

    selectElement.id = "stateSelect";

    // 简化遍历逻辑，直接处理数组中的第一个对象
    var stateObj = options[0];
    for (var key in stateObj) {
        var option = document.createElement("option");
        option.value = key;
        option.text = stateObj[key];
        selectElement.appendChild(option);
    }

    // 插入到目标元素前方
    var insertBeforeElement = document.getElementById(insertBeforeId);
    insertBeforeElement.parentNode.insertBefore(selectElement, insertBeforeElement);
}

// 执行函数生成select
createSelectElement(stateOptions, "form_state");

HTML代码（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select Element Example</title>
</head>
<body>
<form action="/action_page.php">
<input type="text" id="form_state" placeholder="Selected State">
<input type="submit" value="Submit">
</form> 

</body>
</html>

额外提示 #

• 如果需要将州的缩写（如AL）赋值到输入框，只需将this.options[this.selectedIndex].text改为this.value。
• 当前select元素使用绝对定位会覆盖下方的input，若需让input可见，可给#form_state添加margin-top: 30px之类的样式调整。

内容的提问来源于stack exchange，提问作者woninana