JS报错addEventListener is not a function：MySQL下拉选值自动填充输入框问题排查

核心报错原因 #

你代码里的逻辑错误导致你尝试给字符串调用addEventListener方法，而该方法只有DOM元素对象才具备，具体错误点如下：

• 第一行const spt = document.querySelector('.sku')+"";逻辑完全错误：document.querySelector('.sku')获取到的是下拉框的DOM元素对象，你强行拼接空字符串将其转为了[object HTMLSelectElement]格式的无意义字符串，后续拆分得到的select是字符串片段，自然不存在addEventListener方法。
• 拆分|的逻辑位置错误：描述和售价拼接在每个option的value属性中，需要在用户选中下拉选项触发change事件时，读取当前选中的value再拆分，不能在页面刚加载时就执行拆分操作。

修正后的JavaScript代码 #

<script>
// 获取下拉框DOM对象
const select = document.querySelector('.sku');
// 获取两个输入框DOM对象
const result = document.querySelector('.desc');
const result1 = document.querySelector('.desc1');

// 绑定下拉框change触发事件
select.addEventListener('change', (event) => {
  // 读取当前选中的value值
  const currentVal = event.target.value;
  // 拆分得到描述和售价
  const valArr = currentVal.split('|');
  // 赋值到输入框，无选中值时默认清空
  result.value = valArr[0] ?? '';
  result1.value = valArr[1] ?? '';
});
</script>

可选优化建议 #

你现有的PHP输出代码存在HTML注入风险，如果数据库中存储的内容包含单引号，会破坏HTML结构，建议修改为转义输出：

<?php
$conn=mysqli_connect('localhost','root','','sku_db'); 
$query = "SELECT * FROM cpu";
$result = $conn->query($query);
while($row = mysqli_fetch_assoc($result)){
    $optionVal = htmlspecialchars($row['Description'].'|'.$row['Sell_Price']);
    $optionText = htmlspecialchars($row['SKU']);
    echo "<option value=\"{$optionVal}\">{$optionText}</option>";
}
?>

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