Nodejs 数据库传递过来的值显示在下拉框中。怎么显示的要么是第一个，要么就是最后一个？

Nodejs 数据库传递过来的值显示在下拉框中。怎么显示的要么是第一个，要么就是最后一个？

.form-group label.col-sm-2.control-label(for=“diamond”) 物品 .col-sm-5 select#inputdiamond.form-control(type=“text”,name=‘goodsname’)

  • for(var j = 0; j < goods.length; j++) option(type=“text”,value=’#{goods[items[i][0].goodsId - 1].name}’,name=‘goodsname’) #{goods[j].name} 这就是显示第一个 .form-group label.col-sm-2.control-label(for=“diamond”) 物品 .col-sm-5 select#inputdiamond.form-control(type=“text”,name=‘goodsname’)
  • for(var j = 0; j < goods.length; j++) option(type=“text”,value=’#{goods[items[i][0].goodsId - 1].name}’,name=‘goodsname’,selected = ‘selected’) #{goods[j].name} 它就显示最后一个值了。。


2 回复

根据你提供的代码片段，问题出在循环中的条件判断以及如何选择默认选中的选项。你的模板似乎使用的是EJS（Embedded JavaScript）模板引擎。让我们通过分析并提供正确的代码来解决这个问题。

问题分析

  1. 显示第一个值：

    • 这是因为在模板中，只执行了一次循环，并且每次都选择了第一个商品。

  2. 显示最后一个值：

    • 这是因为在每次循环中，你都设置了 selected='selected' 属性，最终只有最后一次循环生效，即选择了最后一个商品。

解决方案

我们需要正确地设置默认选中的选项。假设你想默认选中某个特定的商品ID对应的选项，可以通过在循环中添加条件判断来实现。以下是修正后的代码示例：

<form method="POST" action="/submit">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="diamond">物品</label>
        <div class="col-sm-5">
            <select id="inputdiamond" class="form-control" name="goodsname">
                <!-- 遍历所有商品 -->
                <% for (var j = 0; j < goods.length; j++) { %>
                    <!-- 检查当前商品是否需要被选中 -->
                    <% var selected = items[i][0].goodsId - 1 === j ? 'selected' : ''; %>
                    <option value="<%= goods[j].name %>" <%= selected %>><%= goods[j].name %></option>
                <% } %>
            </select>
        </div>
    </div>
</form>

代码解释

  1. 遍历商品数组：

    • 使用 <% for (var j = 0; j < goods.length; j++) { %> 循环遍历所有的商品。

  2. 条件判断：

    • 使用 <% var selected = items[i][0].goodsId - 1 === j ? 'selected' : ''; %> 判断当前商品是否需要被选中。如果当前商品ID与需要默认选中的商品ID匹配，则设置 selected 属性。

  3. 渲染选项：

    • 使用 <option value="<%= goods[j].name %>" <%= selected %>> 渲染每个选项，并根据条件设置 selected 属性。

这样可以确保默认选中的商品是根据你的逻辑正确设置的，而不是总是选择第一个或最后一个。


根据你的描述，问题可能出在循环逻辑或变量作用域上。你在循环中使用了一个固定索引 items[i][0].goodsId - 1，这会导致每次循环时都使用相同的选项作为默认选中的值。你可以通过检查每个选项并设置相应的 selected 属性来解决这个问题。

以下是一个改进后的示例代码：

<form>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="diamond">物品</label>
        <div class="col-sm-5">
            <select id="inputdiamond" class="form-control" name="goodsname">
                <% for (var j = 0; j < goods.length; j++) { %>
                    <option value="<%= goods[j].name %>" <%= goods[j].id === items[i][0].goodsId ? 'selected' : '' %>><%= goods[j].name %></option>
                <% } %>
            </select>
        </div>
    </div>
</form>

解释：

  1. 循环遍历：我们遍历 goods 数组。
  2. 条件判断：在每次循环中，我们检查当前选项的 id 是否与 items[i][0].goodsId 相等。如果相等，则将 selected 属性添加到该选项上，否则不添加。
  3. 模板引擎：这里假设你使用的是 EJS 模板引擎（类似于 <% ... %> 和 <%= ... %> 的语法）。

这样可以确保正确的选项被选中，而不会总是显示第一个或最后一个。

回到顶部