如何通过URL预选中下拉菜单中的选项

实现思路 #

1. 解析URL中的查询参数，提取productsDropdown的值
2. 建立参数值与下拉选项文本的映射，适配格式差异
3. 设置对应选项为选中状态，自动触发表格过滤逻辑

完整JavaScript代码 #

将以下代码放在页面</body>标签之前，确保DOM加载完成后执行：

// 解析URL查询参数
const urlParams = new URLSearchParams(window.location.search);
const productParam = urlParams.get('productsDropdown');

if (productParam) {
  // 获取下拉菜单元素
  const dropdown = document.getElementById('productsDropdown');
  // 适配URL参数的小写格式，映射到对应选项文本
  const paramMap = {
    'producta': 'Product A',
    'productb': 'Product B',
    'productc': 'Product C',
    'all': 'All'
  };
  const targetText = paramMap[productParam.toLowerCase()];
  
  if (targetText) {
    // 遍历选项设置选中状态
    Array.from(dropdown.options).forEach(option => {
      option.selected = option.textContent === targetText;
    });
    // 触发表格过滤
    filterTable();
  }
}

// 表格过滤函数（替代原有可能失效的函数）
function filterTable() {
  const selectedValue = document.getElementById('productsDropdown').value;
  const rows = document.querySelectorAll('#myTable tr:not(.header)');
  
  rows.forEach(row => {
    const productCol = row.children[2];
    const shouldShow = selectedValue === 'All' || productCol.textContent.trim() === selectedValue;
    row.style.display = shouldShow ? '' : 'none';
  });
}

关键注意事项 #

• URL格式修正：正确的参数URL应为https://www.mywebsite.com/?productsDropdown=producta（必须以?开头，这是此前方案可能失效的核心原因）
• 可根据需求扩展paramMap对象，支持更多格式的参数值
• 确保filterTable函数正常运行，上述代码已包含完整过滤逻辑

原HTML代码 #

<div class="filter-section">
  <div class="filter">
    <p class="filter-name">Product</p>
    <select class="dropdown" id="productsDropdown" oninput="filterTable()">
      <option>All</option>
      <option>Product A</option>
      <option>Product B</option>
      <option>Product C</option>
    </select>
  </div>
</div>
<!-- filter section end -->
<!-- table start -->
<table id="myTable">
  <tr class="header">
    <th style="width: 20%">Name</th>
    <th style="width: 40%">Description</th>
    <th style="width: 20%">Product</th>
  </tr>
  <!-- Access Requests start -->
  <!-- row start -->
  <tr>
    <td>
      <a class="request-link" href="#" target="_blank">Request A</a>
    </td>
    <td>Sit amet consectetur adipisicing elit.</td>
    <td>Product A</td>
  </tr>
  <!-- row end -->
  <!-- row start -->
  <tr>
    <td>
      <a class="request-link" href="#" target="_blank">Request B</a>
    </td>
    <td>Modi placeat quos impedit sit optio doloremque veniam expedita?</td>
    <td>Product B</td>
  </tr>
  <!-- row end -->
  <!-- row start -->
  <tr>
    <td>
      <a class="request-link" href="#" target="_blank">Request C</a>
    </td>
    <td>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</td>
    <td>Product C</td>
  </tr>
  <!-- row end -->
</table>
<!-- table end -->

原CSS代码 #

#myInput {
  background-image: url("https://www.w3schools.com/css/searchicon.png");
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;
}

.filter-section {
  display: flex;
  margin-bottom: 6px;
  gap: 12px;
}

.filter-name {
  font-size: 14px;
  color: #666666;
}

.dropdown {
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  padding: 1px;
}

.request-link:link,
.request-link:visited {
  text-decoration: none;
  color: #4050c7;
}

.request-link:hover,
.request-link:active {
  color: #4050c7;
}

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