如何获取JavaScript对象中选中元素的索引并传递至PHP接口

看起来你现在的核心问题是：你想要的是选中项在遍历dashboardArray时的顺序索引（0、1、2、3这种），但目前的代码里dashboardIndex是遍历完整个对象后的最终值，不管用户选哪个选项，传的都是同一个值，这肯定不对。

下面是一步步的解决方案：

1. 先把对象转换成带顺序索引的数组 #

因为你的dashboardArray是一个键非连续的对象（键是2、3、4、6），而你需要的是遍历它时的顺序位置索引，所以先把它转换成包含索引的数组，方便后续绑定：

// 把原对象转换成带索引的数组
var dashboardList = Object.entries(dashboardArray).map(([id, title], index) => {
  return {
    index: index, // 这就是你要的顺序索引
    id: id,
    title: title.charAt(0).toUpperCase() + title.slice(1)
  };
});

2. 用新数组生成Option，并绑定索引 #

生成option的时候，把每个项的index存在option的data-index属性里，这样选中时就能直接拿到对应的索引：

// 清空原有的默认选项（可选，看你需求）
$('#idDashboards').empty().append('<option value="">Jump to Dashboard</option>');

// 遍历新数组生成option
dashboardList.forEach(item => {
  $('#idDashboards').append($('<option>')
    .prop('value', item.id)
    .attr('data-index', item.index) // 把索引存在data属性里
    .text(item.title)
  );
});

3. 修改AJAX请求，传递选中项的索引 #

在change事件里，直接从选中的option上获取data-index的值，然后传给PHP接口：

$("#idDashboards").change(function() {
  var selectedOption = $(this).find('option:selected');
  var idDashboard = selectedOption.val();
  var dashboardIndex = selectedOption.data('index'); // 拿到对应的顺序索引

  if (!idDashboard) return; // 如果选的是默认选项，不发送请求

  $.ajax({
    url: 'Path/To/PHP/File?Action=' + dashboardIndex, // 注意GET请求的参数拼接格式
    method: 'GET',
    success: function(result) {
      console.log("请求成功！返回结果：", result);
      location.reload();
    },
    error: function(xhr) {
      console.error("请求出错：", xhr);
    }
  });
});

为什么这么改？ #

• 原对象的键（2、3、4、6）是后端返回的iddashboard，不是你要的顺序索引，所以我们通过map方法给每个项加上了遍历顺序的index。
• 把索引存在data-index属性里，是DOM元素存储自定义数据的标准方式，方便后续直接获取。
• 之前的dashboardIndex是全局变量，循环完后只会保留最后一个值，根本无法对应选中项的索引，现在直接从选中的option上取，才是正确的做法。

你可以测试一下，选中不同的选项时，console.log(dashboardIndex)应该会输出0、1、2、3这样的顺序索引，然后这个值就会正确传递到你的PHP接口里了。

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