Невозможно манипулировать через getElementById для раскрывающихся списков AJAXed

Question

Я использую это, чтобы получить выпадающие списки:

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, это нормально?

---

Разъяснение

Сам фактический идентификатор находится на главной странице, но все параметры импортируются с другой страницы. Я не могу использовать этот код, в частности:

<?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>

в силу ид.

---

Решение

Передайте другую переменную через функцию 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;
    }
}     

Answer 1

Вы не можете сделать ничего полезного с элементом province, пока он не будет заполнен вашим вызовом AJAX.Вы должны переместить этот фрагмент 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 говорит о списке стран, но ваш обновленный вопрос говорит о списке провинций, поэтому я не уверен, какая из них является вашей проблемой;тем не менее, я почти уверен, что основная проблема заключается в том, что вы устанавливаете значение <select> до того, как вы заполните <select> вызовом AJAX, и решение состоит в том, чтобы установить значение в обратном вызове AJAX после обновленияDOM с HTML из вашего AJAX-вызова.

Answer 2

Если вы используете View / Source, он обычно покажет вам источник страницы только во время первой загрузки, т.е. он не будет включать элементы, созданные программно позже. Если вы думаете об этом, то на самом деле хорошо , потому что это позволяет увидеть, как начинается страница. Однако вы все равно должны иметь возможность манипулировать элементами, созданными программно, включая элементы, созданные из возврата AJAX. Сказав это, есть более продвинутые инструменты отладки на основе браузера, чем просто View / Source.

Если вы хотите использовать getElementById(), убедитесь, что ваш серверный код возвращает атрибут id для рассматриваемых элементов. Если у вас возникли проблемы с его настройкой, это может помочь нам, если вы разместите часть своего серверного кода.