如何获取与下拉选框匹配的PLink类div的索引编号

需求说明 #

现有如下HTML结构：下拉选框的选项ID与.PLink类元素内链接URL的末尾部分一一对应，需要实现：当选框选中某选项时，返回对应.PLink元素的从1开始的索引编号（例如选中gloves选项时返回4），用于后续触发其他函数。

HTML结构 #

<select id="PSelect" name="Pselect">
    <option value="">Items</option>
    <option id="scarf" value="White Scarf">White Scarf</option>
    <option id="shirt" value="Black Shirt">Black Shirt</option>
    <option id="jacket" value="White Jacket">White Jacket</option>
    <option id="gloves" value="Yellow Gloves">Yellow Gloves</option>
</select>

<div><div class="PLink"><a href="product/scarf">Green Scarf</a></div></div>
<div><div class="PLink"><a href="product/shirt">Black Shirt</a></div></div>
<div><div class="PLink"><a href="product/jacket">White Jacket</a></div></div>
<div><div class="PLink"><a href="product/gloves">Yellow Gloves</a></div></div>

现有代码 #

已能提取链接URL中的目标字符串：

$(".PLink a").each(function () {
    var href=$(this).prop('href');
    var n = href.lastIndexOf('/');
    var cat_code = href.substring(n + 1);
});

解决方案 #

通过预存映射关系+监听选框事件的方式实现，代码如下：

// 预存每个PLink的cat_code与对应索引（从1开始）的映射
const linkIndexMap = {};
$(".PLink").each(function(index) {
  const $a = $(this).find("a");
  const href = $a.prop('href');
  const n = href.lastIndexOf('/');
  const cat_code = href.substring(n + 1);
  // 索引从1计数，匹配需求中的示例
  linkIndexMap[cat_code] = index + 1;
});

// 监听下拉选框的选择变化事件
$("#PSelect").on("change", function() {
  const selectedOptionId = $(this).find(":selected").attr("id");
  // 排除默认的空选项
  if (selectedOptionId) {
    const targetIndex = linkIndexMap[selectedOptionId];
    if (targetIndex) {
      // 此处获取到目标索引，可调用你的后续函数
      console.log("对应PLink的索引：", targetIndex);
      // 示例：triggerYourFunction(targetIndex);
    }
  }
});

代码说明 #

1. 预存映射：遍历所有.PLink元素，提取每个链接的cat_code，将其与元素的索引（从1开始）绑定存储到对象中，后续查找无需重复遍历DOM，提升效率。
2. 事件监听：给下拉选框绑定change事件，当选中选项时，获取当前选项的id（与cat_code完全匹配），直接从映射对象中取出对应的索引，即可用于后续逻辑。

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