基于下拉选择填充表格的技术实现求助

需求：通过下拉菜单选择名称后，表格自动展示该名称对应的关联数据。当前使用模板引擎循环输出全量数据库数据的代码如下：

<div class="main-items">
    <h2>Database</h2>
        <div class="card-items">

            <table class="main-items-table">
                        <tr>
                            <td class="menu-box-tab-items-identifiers">Name:</td>

                            {% for d in database %}
                            <td class="menu-box-tab-items" href="/cusip/{{d.company_name}}"><span>{{d.name}}</span></td>
                            {% endfor %}

                        </tr>

                        <tr>
                            <td class="menu-box-tab-items-identifiers">Item:</td>

                            {% for d in database %}
                            <td class="menu-box-tab-items"><span>{{d.item}}</span></td>
                            {% endfor %}

                        </tr>

                        <tr>
                            <td class="menu-box-tab-items-identifiers">Method of Shipment:</td>

                            {% for d in database %}
                            <td class="menu-box-tab-items" href="#6"><span>{{d.method_of_shipment}}</span></td>
                            {% endfor %}

                        </tr>

                        <tr>
                            <td class="menu-box-tab-items-identifiers">Days:</td>

                            {% for d in database %}
                            <td class="menu-box-tab-items" href="#6"><span>{{d.days}}</span></td>
                            {% endfor %}

                        </tr>

                      
                        <tr>
                            <td class="menu-box-tab-items-identifiers">Location:</td>
                            {% for d in database %}
                                <td class="menu-box-tab-items"><a href="https://www.google.com/search?q={{d.location}}"></span>{{d.location}}</a></td>
                            {% endfor %}

                        </tr>

                        <tr>
                            <td class="menu-box-tab-items-identifiers">Country:</td>
                            {% for d in database %}
                            <td class="menu-box-tab-items" href="#6"><span>{{d.country}}</span></td>
                            {% endfor %}

                        </tr>


                </tbody>
            </table>
        </div>
</div>

解决方案 #

1. 添加下拉选择菜单 #

在表格上方插入下拉菜单，用模板引擎循环生成所有选项，每个选项绑定数据的唯一标识（建议用id，若name唯一也可使用）：

<div class="main-items">
    <h2>Database</h2>
    <!-- 新增下拉选择菜单 -->
    <select id="nameSelector" class="name-select">
        <option value="">请选择名称</option>
        {% for d in database %}
        <option value="{{d.id}}">{{d.name}}</option>
        {% endfor %}
    </select>
    <div class="card-items">
        <!-- 表格部分 -->
        ...
    </div>
</div>

2. 重构表格结构 #

将原表格每行循环输出全量数据的结构，改为仅展示单条数据的结构，给每个数据单元格添加唯一标识，方便JS定位修改：

<table class="main-items-table">
    <tr>
        <td class="menu-box-tab-items-identifiers">Name:</td>
        <td class="menu-box-tab-items" id="displayName"><span></span></td>
    </tr>
    <tr>
        <td class="menu-box-tab-items-identifiers">Item:</td>
        <td class="menu-box-tab-items" id="displayItem"><span></span></td>
    </tr>
    <tr>
        <td class="menu-box-tab-items-identifiers">Method of Shipment:</td>
        <td class="menu-box-tab-items" id="displayShipment"><span></span></td>
    </tr>
    <tr>
        <td class="menu-box-tab-items-identifiers">Days:</td>
        <td class="menu-box-tab-items" id="displayDays"><span></span></td>
    </tr>
    <tr>
        <td class="menu-box-tab-items-identifiers">Location:</td>
        <td class="menu-box-tab-items" id="displayLocation">
            <a href="" target="_blank"></a>
        </td>
    </tr>
    <tr>
        <td class="menu-box-tab-items-identifiers">Country:</td>
        <td class="menu-box-tab-items" id="displayCountry"><span></span></td>
    </tr>
</table>

3. 编写JavaScript逻辑 #

将模板引擎的数据库数据转为前端可访问的JSON数组，监听下拉菜单的change事件，根据选中的ID匹配对应数据并更新表格内容：

<script>
// 把模板引擎的数据库数据转为前端数组（若模板引擎不支持tojson，需后端提前序列化）
const databaseData = {% raw %}{{ database | tojson }}{% endraw %};

// 获取DOM元素
const selector = document.getElementById('nameSelector');
const displayName = document.getElementById('displayName').querySelector('span');
const displayItem = document.getElementById('displayItem').querySelector('span');
const displayShipment = document.getElementById('displayShipment').querySelector('span');
const displayDays = document.getElementById('displayDays').querySelector('span');
const displayLocation = document.getElementById('displayLocation').querySelector('a');
const displayCountry = document.getElementById('displayCountry').querySelector('span');

// 监听下拉选择事件
selector.addEventListener('change', function() {
    const selectedId = this.value;
    if (!selectedId) {
        // 清空表格内容
        displayName.textContent = '';
        displayItem.textContent = '';
        displayShipment.textContent = '';
        displayDays.textContent = '';
        displayLocation.textContent = '';
        displayLocation.href = '';
        displayCountry.textContent = '';
        return;
    }
    // 匹配选中的数据
    const selectedData = databaseData.find(item => item.id == selectedId);
    if (selectedData) {
        // 更新表格各字段内容
        displayName.textContent = selectedData.name;
        displayItem.textContent = selectedData.item;
        displayShipment.textContent = selectedData.method_of_shipment;
        displayDays.textContent = selectedData.days;
        displayLocation.textContent = selectedData.location;
        displayLocation.href = `https://www.google.com/search?q=${encodeURIComponent(selectedData.location)}`;
        displayCountry.textContent = selectedData.country;
    }
});
</script>

注意事项 #

• 确保数据的id是唯一标识，若使用name作为选项value，需保证名称无重复
• 修正了原代码中td使用href属性的错误（td不支持该属性，需用<a>标签包裹）
• 修复了原代码中Location字段多余的</span>标签

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