如何将select下拉选项转换为可点击链接区域？

嘿，我来帮你搞定这个需求！针对你提供的下拉框代码，这里有两种实用的实现方式，你可以根据自己的场景选：

方案1：监听选择事件，选中后自动跳转 #

这种方法不用修改原有的下拉框结构，只是给它加个事件监听，用户选中某个选项后直接跳转到对应链接。适合需要保留下拉框原生样式，同时实现跳转的场景。

实现代码（原生JavaScript） #

// 获取你的下拉框元素
const themeSelect = document.getElementById('edit-field-video-theme-target-id');

// 添加选择变更事件监听
themeSelect.addEventListener('change', function() {
  const selectedValue = this.value;
  // 跳过默认的"- Tout -"选项
  if (selectedValue !== 'All') {
    // 这里替换成你实际的跳转URL，比如根据value拼接对应页面地址
    const targetUrl = `/video-themes/${selectedValue}`;
    // 跳转到目标链接
    window.location.href = targetUrl;
  }
});

说明 #

• 你只需要把/video-themes/${selectedValue}替换成实际的页面路径就行，比如如果对应A*midex的页面是/themes/amidex，也可以改成判断value的方式来拼接不同URL。
• 如果需要新窗口打开，把window.location.href换成window.open(targetUrl, '_blank')。

方案2：将下拉框转为可点击的链接列表 #

如果你想要更像“链接区域”的视觉效果（比如鼠标移上去有手型，点击直接跳转，不用先展开下拉），可以把原生下拉框隐藏，用JavaScript生成一个链接列表来替代它。

实现代码 #

HTML（保留原下拉框，用来做降级处理）

<select data-drupal-selector="edit-field-video-theme-target-id" id="edit-field-video-theme-target-id" name="field_video_theme_target_id" class="form-select" >
  <option value="All" selected="selected">- Tout -</option>
  <option value="9">A*midex</option>
  <option value="11">Bibliothèque</option>
  <option value="10">Relation entreprise</option>
  <option value="8">Université</option>
</select>
<!-- 用来存放生成的链接列表 -->
<div id="theme-links-container"></div>

CSS（美化链接列表样式）

/* 隐藏原生下拉框 */
#edit-field-video-theme-target-id {
  display: none;
}

/* 链接列表样式 */
#theme-links-container .theme-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#theme-links-container .theme-link-list li {
  border-bottom: 1px solid #eee;
}

#theme-links-container .theme-link-list li:last-child {
  border-bottom: none;
}

#theme-links-container .theme-link-list a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
}

#theme-links-container .theme-link-list a:hover {
  background-color: #f5f5f5;
  color: #0071b3;
}

JavaScript（生成链接列表）

const themeSelect = document.getElementById('edit-field-video-theme-target-id');
const linksContainer = document.getElementById('theme-links-container');

// 创建列表元素
const linkList = document.createElement('ul');
linkList.classList.add('theme-link-list');

// 遍历下拉框的所有选项
Array.from(themeSelect.options).forEach(option => {
  const listItem = document.createElement('li');
  const link = document.createElement('a');
  
  link.textContent = option.textContent;
  
  // 设置跳转链接，同样替换成实际地址
  if (option.value === 'All') {
    link.href = '/'; // 默认选项跳转到首页或者你想要的页面
  } else {
    link.href = `/video-themes/${option.value}`;
  }
  
  listItem.appendChild(link);
  linkList.appendChild(listItem);
});

// 把列表添加到容器里
linksContainer.appendChild(linkList);

说明 #

• 这种方式视觉上更像独立的链接区域，用户体验更直观。
• 保留了原有的下拉框，在JavaScript禁用的情况下，用户依然可以通过原生下拉框选择（不过需要额外处理表单提交或者跳转逻辑）。

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