jQuery 实现下拉菜单选中项的自定义属性值动态写入按钮或链接 href

本文详解如何使用 jQuery 监听自定义下拉菜单（非原生 <select>）中 <a> 元素的点击事件，提取其 perma 自定义属性值，并实时更新目标按钮或链接的 href 属性，实现无缝跳转逻辑。

本文详解如何使用 jquery 监听自定义下拉菜单（非原生 “）中 “ 元素的点击事件，提取其 `perma` 自定义属性值，并实时更新目标按钮或链接的 `href` 属性，实现无缝跳转逻辑。

在实际前端开发中，许多“下拉菜单”并非使用标准 <select> 元素，而是基于 <p> + <a> 的自定义结构（如您提供的 .dropdown-list），以获得更灵活的样式与交互控制。这类结构虽不具原生表单语义，但可通过 jQuery 精准捕获用户操作，并将自定义属性（如 perma）映射到其他 DOM 元素（如按钮或链接）上，从而驱动后续行为（例如页面跳转）。

✅ 核心实现逻辑

您的 HTML 结构如下：

<p class="dropdown-list">
  <p><a href="https://www.php.cn/link/6dbe523032e74da51d47dd44aa7ed477" perma="http://test.com/xxxx1/">Link 1</a></p>
  <p><a href="#3302" perma="http://test.com/xxxx2/">Link 2</a></p>
  <p><a href="#3303" perma="http://test.com/xxxx3/">Link 3</a></p>
</p>
<a id="myButton" href="http://test.com/default/">Go</a>

关键点在于：

• perma 是自定义属性（非标准 HTML 属性），应通过 .attr(‘perma’) 获取（而非 .data(‘perma’)，因 data-* 属性需经 jQuery 解析且会自动转换驼峰命名，而 perma 无连字符，直接用 attr 更可靠、语义清晰）；
• 点击事件需绑定在 <a> 上（而非 <p>），确保精准捕获目标元素；
• 更新目标链接时，推荐使用 $(“#myButton”).attr(“href”, value)，而非修改 innerHTML 或 text()，以保持语义与可访问性。

✅ 完整可运行代码（含防错与最佳实践）

<!-- HTML -->
<p class="input-dropdown">
  <input type="text" placeholder="选择链接..." readonly />
  <i>▼</i>
  <p class="dropdown-list">
    <p><a href="https://www.php.cn/link/6dbe523032e74da51d47dd44aa7ed477" perma="http://test.com/xxxx1/">文档 A</a></p>
    <p><a href="#3302" perma="http://test.com/xxxx2/">文档 B</a></p>
    <p><a href="#3303" perma="http://test.com/xxxx3/">文档 C</a></p>
  </p>
</p>

<a id="goButton" href="https://example.com" target="_blank" class="btn">前往链接</a>

// jQuery 初始化逻辑（建议包裹在 $(document).ready() 中）
$(function() {
  // 1. 下拉展开/收起逻辑（您已提供，此处保留兼容性）
  $('.input-dropdown input, .input-dropdown > i').on('click', function() {
    const $parent = $(this).closest('.input-dropdown');
    const $list = $parent.find('.dropdown-list');
    $list.slideToggle(300);
  });

  // 2. ✅ 关键：点击下拉项时，提取 perma 并更新按钮 href
  $('.dropdown-list a').on('click', function(e) {
    e.preventDefault(); // 阻止默认锚点跳转（https://www.php.cn/link/6dbe523032e74da51d47dd44aa7ed477 等）

    const permaUrl = $(this).attr('perma'); // ✅ 正确获取自定义属性
    if (permaUrl && permaUrl.trim()) {
      $('#goButton').attr('href', permaUrl);
      console.log('已更新按钮 href 为:', permaUrl);
    } else {
      console.warn('警告：当前选项缺少有效的 perma 属性');
    }

    // 可选：同步关闭下拉菜单
    $(this).closest('.dropdown-list').slideUp(300);
  });

  // 3. 全局点击收起（您已有，保持一致）
  $(document).on('click', function(e) {
    if (!$(e.target).closest('.input-dropdown').length) {
      $('.input-dropdown .dropdown-list:visible').slideUp(300);
    }
  });
});

⚠️ 注意事项与常见误区

? 扩展建议（进阶场景）

• 支持按钮点击跳转：若目标是 <button> 而非 <a>，可改用 window.location.href = permaUrl 触发跳转；
• 添加视觉反馈：点击后为 #goButton 添加临时 active 类，提示用户已就绪；
• 持久化选择状态：结合 localStorage 缓存上次选中的 perma，页面刷新后自动恢复；
• 无障碍增强：为 .dropdown-list a 添加 role=”option” 和 aria-selected，提升屏幕阅读器兼容性。

通过以上方案，您即可稳定、高效地将自定义下拉菜单中的 perma 属性值实时注入目标链接，兼顾功能正确性、代码可维护性与用户体验一致性。