如何用jQuery在动态加载的datalist中匹配projid并设置显示项？

核心问题分析 #

你拿不到option元素，主要两个原因：一是执行时机不对——你可能在datalist还没生成完就去查找元素；二是选择器不够精准，而且你的datalist里嵌套了select，浏览器可能对这种非标准结构做了隐藏处理（就是你看到的灰色状态）。

具体解决步骤 #

1. 卡准元素生成的时机再执行代码 #

datalist是选完group才动态创建的，所以不能在页面刚加载时就跑查找逻辑，必须等datalist及其内部的option完全渲染好再执行。

如果生成datalist的代码是异步请求数据后渲染的，直接把匹配逻辑塞到生成完成的回调里：

// 假设这是生成datalist的函数
function renderProjectList() {
  // 这里写请求数据、生成datalist和option的代码
  // ...

  // 生成完立刻执行匹配逻辑
  const savedProjid = localStorage.getItem('projid'); // 从浏览器存储拿projid
  setProjectByProjid(savedProjid);
}

function setProjectByProjid(projid) {
  // 精准定位到select里的option
  const targetOpt = $('#projectOptions option[data-projid="' + projid + '"]');
  if (targetOpt.length) {
    $('#ProjTitle').val(targetOpt.val());
  }
}

2. 用MutationObserver监听元素变化（没法改生成代码时用） #

如果没法修改生成datalist的代码，不确定它什么时候加载完，可以用MutationObserver监听父元素的变化，等option出现后再处理：

$(function() {
  const savedProjid = localStorage.getItem('projid');
  const parent = document.getElementById('projectSelect');

  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      const projectOpts = document.getElementById('projectOptions');
      // 检查是否有option生成
      if (projectOpts && projectOpts.children.length > 0) {
        const targetOpt = $('#projectOptions option[data-projid="' + savedProjid + '"]');
        if (targetOpt.length) {
          $('#ProjTitle').val(targetOpt.val());
        }
        // 找到元素就停止监听，避免重复触发
        observer.disconnect();
      }
    });
  });

  // 监听父元素的子节点变化，包括深层子元素
  observer.observe(parent, { childList: true, subtree: true });
});

3. 优化datalist结构（可选但推荐） #

标准的datalist不需要嵌套select，直接把option放进去就行，这样浏览器不会做隐藏处理，查找也更顺畅：

<div id="projectSelect">
  <input type="text" name="ProjTitle" id="ProjTitle" placeholder="~ select project ~" list="projectList" autocomplete="off" value=""> 
  <datalist id="projectList">
    <option data-projid="390" value="Project 1">Project 1</option>
    <option data-projid="391" value="Project 2">Project 2</option>
    <option data-projid="392" value="Project 3">Project 3</option>
  </datalist>
</div>

这种结构下，选择器改成$('#projectList option[data-projid="' + projid + '"]')就行。

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