Как вставить раскрывающийся список PHP на страницу HTML/Javascript

решение jQuery

Если вы хотите использовать jQuery, это очень поможет вам с доступом к DOM, вызовами Ajax и прочим. Позвольте мне дать вам решение в jQuery:

Во-первых, поместите div в HTML (это сохранит ваше поле выбора):

<div id="i_want_my_select_here"></div>

Затем поместите этот код в конец вашего HTML-кода перед </body>.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#i_want_my_select_here').load('/temp/select.php');
  });
</script>

В первый тег script мы включаем библиотеку jQuery из CDN Google. Во втором мы пишем наш код Javascript/jQuery. Функция .load() упрощает вызов Ajax и загрузку ответа в элемент HTML.

Вы можете видеть, что это намного проще, чем весь этот код в моем другом ответе :).

Если вы используете prototype, вы можете использовать либо Ajax.Request или Ajax.Updater, хотя у вас должен быть родительский div, в который можно заменить/вставить.

Пример с запросом:

new Ajax.Request('select.php', {
  method: 'post',
  onSuccess: function(r) {
    var select = r.responseText;
    $('parent_div').update(select);
  }
});

Пример с программой обновления:

new Ajax.Request('parent_div', 'select.php', { method: 'post' });

Во-первых, пример Ajax (взят с сайта tizag.com и изменен), код Javascript приходит:

var ajaxRequest;  // The variable that we will put an XMLHTTPRequest object in

//We try to create an XMLHTTPRequest object, 
//it is the object that lets us use Ajax

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}

// Create a function that will receive data sent from the server
// and do stuff with it (this function will only run, 
// when the data arrives back from the server!)
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){ //if request is successful
           //HERE COMES THE DOM INSERTION
    }
}

//We call the PHP file
ajaxRequest.open("GET", "/temp/select.php", true);
ajaxRequest.send(null); 

Что в основном произошло, так это то, что через XMLHTTPRequest мы вызвали ваш файл PHP. Когда придет ответ (вывод файла PHP), ajaxRequest.onreadystatechange запустится мгновенно. Итак, что бы мы ни хотели сделать с полученными данными, мы должны сделать это в том месте, которое я написал //HERE COMES THE DOM INSERTION.

Мы хотим вставить вывод в HTML. Чтобы выбрать самый простой путь, сначала создайте div/span в своем HTML именно в том месте, где вы хотите, чтобы ваш выбор отображался (очень важно определить идентификатор).

<div id="i_want_my_select_here"></div>

Опять же, здесь появляется Javascript, который заменяет //HERE COMES THE DOM INSERTION.

//use the id to get Javascript access to the DIV
var div=document.getElementById('i_want_my_select_here');
//put the output of PHP into the div
div.innerHTML=ajaxRequest.responseText;