无法通过 getElementById 对 AJAXed 下拉列表进行操作

Unable to manipulate via getElementById for AJAXed dropdown lists

本文关键字：下拉列表 操作 AJAXed getElementById      更新时间：2023-09-26

我正在使用它来拉取下拉列表：

function showRecords(str,column,nextDiv) {
  if (str== null) {
    document.getElementById(nextDiv).innerHTML="----------------------------------------";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    var xmlhttp=new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById(nextDiv).innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getRecords.php?"+column+"="+str,true);
  xmlhttp.send();
}

页面加载正常，但是，当您查看源信息时，AJAX 中没有任何内容，因此我无法通过getElementById操作下拉列表的任何值，这正常吗？

澄清

实际 ID 本身位于主页上，但所有选项都是从另一个页面导入的。我无法特别使用此代码： 

<?php echo "document.getElementById('province').value ='"Abim'";";?>

因为这些国家/地区在此页面上不存在，所以它们是导入的值，不仅如此，页面上唯一的东西就是这个......

<option value = >--------------------</option>
<option value="Abim">Abim</option>
<option value="Adjumani">Adjumani</option>
<option value="Amolatar">Amolatar</option>
<option value="Amuria">Amuria</option>
... etc

这里都插了

<select name =province class=dropdown id=province></select>

凭借 ID。

溶液

通过 AJAX 函数传递另一个变量：oldVal （$_REQUESTed Value）

...
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById(nextDiv).innerHTML = xmlhttp.responseText;
        ---------> document.getElementById(nextDiv).value = oldVal;
    }
}
在

AJAX 调用填充 province 元素之前，您无法对它执行任何有用的操作。你必须移动这段 JavaScript：

document.getElementById('country').value = "Uganda";

到 AJAX 回调中：

xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById(nextDiv).innerHTML = xmlhttp.responseText;
        document.getElementById('country').value = "Uganda";
    }
};

或者类似的东西。您对nnnnnn的评论是在谈论国家/地区列表，但您更新的问题正在谈论省份列表，所以我不确定哪一个是您的问题;但是，我很确定潜在的问题是您在使用 AJAX 调用填充该<select>之前设置了<select>的值，解决方案是在使用 AJAX 调用中的 HTML 更新 DOM 后在 AJAX 回调中设置值。

如果您使用 View/Source，它通常只会在页面首次加载时显示页面的源代码，即它不会包含以后以编程方式创建的项目。如果你考虑一下，这实际上很好，因为它可以让你看到页面是如何开始的。但是，您仍然应该能够操作以编程方式创建的元素，包括从 AJAX 返回中获取的元素。话虽如此，除了视图/源之外，还有更高级的基于浏览器的调试工具。

如果要

使用getElementById()请确保服务器端代码返回相关元素的 id 属性。如果您在使其工作时遇到问题，如果您发布了一些服务器端代码，可能会对我们有所帮助。

相关文章：