在JS、EJS、Mongoose、Express项目中使用jQuery实现下拉选择联动对应价格的问题求助

你的核心问题是把服务器端渲染的数组当成了字符串处理，导致遍历的时候拿到的是单个字符而非数组元素，另外还有重复引入jQuery的问题，我来一步步帮你解决：

1. 为什么之前的代码会显示随机值？ #

当你用 var $arr = "<%=array; %>"; 时，EJS会把数组直接转换成字符串输出（比如 ["15","25","35"] 会变成 "15,25,35"）。这时候你遍历这个字符串，相当于把每个字符拆出来遍历——比如索引0取到"1"，索引1取到"5"，这就是你看到的“随机值”的由来。

2. 修复步骤 #

第一步：正确传递价格数组到客户端JS #

在EJS里，我们需要把价格数组转换成合法的JSON字符串，这样客户端JS才能直接拿到真正的数组，而不是字符串。修改EJS代码如下：

<li class="list-group-item" id="price"> 
  € <% let priceArray = kiteProduct.price.split(','); %> 
</li> 
<select class="form-select" id="sizes" aria-label="Default select example"> 
  <option value="0" selected>Select Size</option> 
  <% let i = 0; %> 
  <% for (let element of kiteProduct.size.split(',')) {%> 
    <!-- 注意value属性要加引号，避免潜在的HTML解析问题 -->
    <option value="<%= i %>" >
      <%= element %> 
    </option> 
  <% i++ %> 
  <% } %> 
</select>

<!-- 把价格数组转换成JSON字符串传递给客户端JS -->
<script>
  const priceList = <%= JSON.stringify(priceArray) %>;
</script>

第二步：简化jQuery逻辑 #

现在客户端已经有了真正的数组priceList，直接用索引取值即可，不需要多余的循环：

<script type='text/javascript'> 
$('#sizes').change(function () { 
  // 加上基数10，确保parseInt按十进制解析
  const selectedIndex = parseInt($(this).val(), 10);
  const selectedPrice = priceList[selectedIndex];
  // 记得保留€符号，不然会被text()替换掉
  $("#price").text(`€ ${selectedPrice}`); 
}); 
</script>

第三步：清理重复的脚本引入 #

你重复引入了两个不同版本的jQuery，这很容易导致冲突，只保留一个即可（推荐用较新的稳定版本）：

<!-- 只保留一个jQuery引入，比如3.x版本 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 如果你不需要在前端渲染EJS（你的场景是服务端渲染），可以去掉ejs.min.js -->

3. 额外注意点 #

• 给<option>的value属性加上引号，避免HTML解析异常；
• 使用parseInt时始终指定基数（比如10），防止意外的八进制解析；
• 替换文本时要保留原来的€符号，否则会丢失样式。

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