Как заполнить выпадающий список из php функцией готового документа?

Вот код php. В этом коде производятся название станции, а также идентификаторы и случайные пассажиры.

<?php

include_once('RestUtils.php');
include_once('Passengers.php');

class Station implements JsonSerializable
{
private $id;
private $name;
private $passengers;

public function __construct($id, $name)
{
    $this->setId($id);
    $this->setName($name);
    $this->passengers = array();
}

//getters and setters
public function jsonSerialize()
{
    $data = array();
    $data['id'] = $this->id;
    $data['name'] = $this->name;
    $data['passengers'] = $this->passengers;
    return $data;
}
}

$stations = generateStations();

$data = RestUtils::processRequest();

switch($data->getMethod())
{
// Get item
case 'get':
    if(isset($data->getRequestVars()['stationId']))
    {
        // Prepare information for a specific station
        $station = getStationWithId($stations, $data->getRequestVars()    
['stationId']);
        if($station != null)
        {
            echo RestUtils::sendResponse(200, json_encode($station),    
'application/json');
        }
        else
        {
            echo RestUtils::sendResponse(404, 'Station not found!');
        }
    }
    else
    {
        // Prepare station list
        echo RestUtils::sendResponse(200, json_encode($stations),     
  'application/json');
    }

    break;
  }

 function generateStations()
 {
$stations = array();
for($i = 1; $i <= 5; $i++)
{ 
    $stations[] = new Station($i, 'İstasyon ' . $i);

    $passengerIds = array();
    foreach(generatePassengers() as $j)
    {
        $passengerIds[] = $j->getId();
    }
    $stations[$i - 1]->setPassengers($passengerIds);
}

return $stations;
 }

function generatePassengers()
{
$passengers = array();

$numberOfPassengers = rand(0, 20);

for($i = 0; $i < $numberOfPassengers; $i++)
{
    $from = rand(0, 5);

    $to = rand(0, 5);

    $arrivalTime = rand(0, 100);

    $waitingTime = rand(0, 100);

    $passengers[] = new Passenger($i, $from, $to, $arrivalTime, $waitingTime);
}

return $passengers;
 }

function getStationWithId($stations, $id)
 {
foreach ($stations as $i)
{
    if($i->getId() == $id)
    {
        return $i;
    }
}

return null;
 }

 ?>

Я хочу заполнить поле со списком полученного названия станции и идентификаторов станций, когда страница загружается с использованием функции готовности документа. После этого, когда пользователь выбирает станцию ​​с именем и идентификатором, он может видеть, сколько пассажиров находится на этой станции, и Идентификаторы пассажиров также должны быть возвращены с Station.php. Обычно у меня были эти опции выбора в HTML-коде, он просто показывал, что станции ничего не делают при выборе любого из них.

<select name="selectStation" id="selectStation" ></select>

Я попробовал следующее;

     $(document).ready(function() {
      $.getJSON("Stations.php", function(jsonData){  

      $.each(jsonData, function(key,value) {   

      $('#selectStation')
     .append($("<option></option>")
     .attr("value",key)
     .text(value)); 

 });
});

});

Я получил значения в выпадающем списке как объект Object. Почему это происходит? Как заполнить поле со списком, когда страница загружена, в соответствии с Stations.php.Thanks. Любой ответ будет оценен.

Источник

1 ответ

Решение

Хорошо, вот пример кода, который будет делать то, что я думаю, что вы хотите. Примечание. Вам все еще нужно добавить прослушиватель событий, чтобы обработать событие изменения поля выбора. Я оставлю это тебе.

Файл 1: ajaxAfterLoad.html

<!DOCTYPE html>
<html>
<head>
<script src="script/AjaxRequest.js"></script>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}


window.addEventListener('load', mInit, false);

function mInit()
{
    AjaxRequest.get( { 'url':'makeJSON.php', 'onSuccess': onAjaxRequestDone } );
}

function makeSelectElementFromJSON(elemId, jsonText)
{
    var srcData = JSON.parse(jsonText);
    var result = newEl('select');
    result.setAttribute('id', elemId);
    var i, curOpt;
    for (i=0; i<srcData.length; i++)
    {
        curOpt = newEl('option');
        curOpt.setAttribute('value', srcData[i].value);
        curOpt.appendChild( newTxt( srcData[i].text ) );
        result.appendChild(curOpt);
    }
    return result;
}

function onAjaxRequestDone(req)
{
    var span = newEl('span');
    span.innerHTML = req.responseText;
    byId('rawOutput').innerHTML = req.responseText;

    byId('ajaxOutput').appendChild( makeSelectElementFromJSON('jsonSelectBox1', req.responseText) );
}
</script>
<style>
</style>
</head>
<body>
    <h2>Below will be loaded by ajax</h2>
    <div id='rawOutput'></div>
    <div id='ajaxOutput'></div>
</body>
</html>

Файл 2: makeJSON.php

<?php

    $resultList = null;

    for ($i=0; $i<10; $i++)
    {
        $curItem = null;
        $curItem->value = $i;
        $curItem->text = "Item " . ($i+1);
        $resultList[] = $curItem;
    }
    printf("%s", json_encode($resultList) );
?>

Файл 3: AjaxRequest.js Загрузите этот файл с http://ajaxtoolbox.com/request/source.php

Источник
Другие вопросы по тегам