如何修改ASP.NET/JS代码：下拉选有值时联动搜索PO编号

首先，假设你的HTML结构大致如下（如果和实际不符，替换对应ID即可）：

<!-- 供应商下拉选框 -->
<select id="supplierSelect">
  <option value="">请选择供应商</option>
  <option value="供应商A">供应商A</option>
  <option value="供应商B">供应商B</option>
</select>

<!-- PO编号搜索框 -->
<input type="text" id="poSearch" placeholder="搜索PO编号...">

<!-- 文件列表表格 -->
<table id="myTable">
  <thead>
    <tr>
      <th>PO编号</th>
      <th>供应商</th>
      <th>文件名</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据行示例 -->
    <tr>
      <td>PO12345</td>
      <td>供应商A</td>
      <td>文件1.pdf</td>
    </tr>
    <!-- 更多数据行... -->
  </tbody>
</table>

替换原搜索逻辑的JS代码，实现组合查询：

// 获取页面元素
const poSearchInput = document.getElementById('poSearch');
const supplierSelect = document.getElementById('supplierSelect');
const tableRows = document.querySelectorAll('#myTable tbody tr');

// 监听搜索框输入事件（实时搜索）
poSearchInput.addEventListener('input', function() {
  const searchKeyword = this.value.trim().toLowerCase();
  const selectedSupplier = supplierSelect.value.trim();

  // 遍历表格每一行
  tableRows.forEach(row => {
    // 根据表格列顺序，获取当前行的PO编号和供应商值
    const poNumber = row.cells[0].textContent.trim().toLowerCase(); // 假设PO编号在第1列（索引0）
    const supplier = row.cells[1].textContent.trim(); // 假设供应商在第2列（索引1）
    
    // 核心判断逻辑：PO编号匹配关键词，同时如果选了供应商则必须匹配
    let isMatch = poNumber.includes(searchKeyword);
    if (selectedSupplier) {
      isMatch = isMatch && (supplier === selectedSupplier);
    }

    // 根据匹配结果显示/隐藏行
    row.style.display = isMatch ? '' : 'none';
  });
});

注意事项： #

• 请根据你实际的表格列顺序，调整row.cells[0]和row.cells[1]的索引值，确保对应到PO编号和供应商的列
• 如果你的搜索是通过点击按钮触发而非实时输入，只需把addEventListener('input', ...)改成按钮的click事件即可
• 代码中的toLowerCase()是为了实现不区分大小写的搜索，不需要的话可以直接删除

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