Блог

Итак, у меня есть веб-сайт с двумя раскрывающимися списками HTML — один представляет собой список штатов США, другой — список городов в выбранном штате. На данный момент у меня есть файл для каждого состояния, и все они имеют параметры, перечисленные как таковые:

 <option value="44.729932, -72.381758">Albany</option>
<option value="44.976728, -73.30257">Alburg</option>
  

Значение представляет собой координаты города. Я не могу загрузить все эти данные сразу (ну, я думаю, я мог бы, но это 1 МБ, и я обслуживаю страницу при подключении со скоростью 130 КБ / с …), поэтому я хотел бы, чтобы каждый файл города загружался после выбора названия его штата… Я создал эти файлы, предполагая, что смогу просто сделать это:

 <select name="state" method="get" id="state">
     <option value="citiestowns/alabama.html">Alabama</option>
     <option value="citiestowns/alaska.html">Alaska</option>
</select>
<select id="cityortown" name="cityortown">
<?php
$state = $_GET['state'];

include("$state");
?>
</select>
  

Но когда я делаю это, я просто получаю выпадающий список состояния и пустой выпадающий список рядом с ним … хееееелп! : (

Если я правильно понимаю, вам нужно показать правильный город на основе ранее выбранного штата?

Почему бы не использовать автозаполнение (например, jQueryUI). И ваш серверный сервер PHP проанализирует ваши данные (PHP не отправит этот 1 МБ пользователю, поскольку это делается на стороне сервера).

Таким образом, вы возвращаете не более 10 результатов (когда пользователь вводит название своего города). Выпадающий список неэффективен для такого большого набора данных. Метод поиска / автозаполнения будет работать намного лучше, ИМХО.

Ссылка:

• http://jqueryui.com/demos/autocomplete/

Вероятно, вы захотите использовать AJAX для этого. Это метод, использующий PHP и Javascript, который позволяет вашей странице получать новые данные с сервера без перезагрузки страницы. Это позволит вашей странице изначально получать с сервера только штаты, а затем получать соответствующие города и их данные из PHP-скрипта.

Итак, вам понадобится

1. Первая HTML-страница. Может быть статическим или сгенерированным на PHP, но потребуется некоторый javascript, чтобы при выборе штата в раскрывающемся списке «Штаты» был сгенерирован выпадающий список «город».

   a — Исходная HTML-страница с раскрывающимся списком состояния

   b- Javascript, описанный выше

2. PHP-скрипт. Эта страница никогда не будет доступна «напрямую» (скорее всего, вы не будете вводить ее URL в свой браузер), но она будет целью запроса сервера.

   Ввод — параметр, указывающий, в каком состоянии

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

Вы не указываете, в какой форме находятся ваши данные (я предполагаю / надеюсь на реляционную базу данных? Document DB было бы неплохо, но CSV было бы довольно сложно) но я попытаюсь нарисовать грубый набросок PHP-скрипта, который я описываю на шаге 2.

getcities.php

 <?php

$state = $_GET['state'];
$cityArray = getCityArray($state); //i won't delve into details here, but probably takes some database calls

echo "<select name='citySelect'>";
foreach($cityArray as $cur)
{
    list($x,$y,$name) = array($cur['x'].$cur['y'],$cur['name']); //this is just to make the next line simpler.  PHP extract function can do something similar too
    echo "<option value='$x,$y'>$name</option>";
}
echo "</select>";

?>
  

Вы можете видеть, как при этом генерируется выпадающий список выбора / опции, содержащий только необходимые элементы.

Javascript будет отвечать за вызов чего-то вроде getcities.php?state='NY' и помещение выходных данных в элемент вашей страницы (вероятно, div)

Посмотрите основы Ajax, чтобы узнать, как это сделать. Библиотеки, подобные jQuery, могут значительно упростить Ajax.

РЕДАКТИРОВАТЬ — в ответ на ваши комментарии

Итак, на своей странице вы можете сделать что-то вроде

 <select name='state' id='stateSelect' onchange='loadCities()'>
    <option value='' select='selected'>Please select a state</option>
    <option value='alabama.html'>Alabama</option>
    OPTIONS FOR EACH STATE HERE
</selecT>

<select name='city' id='citySelect'> //blank initially.  gets filled when you pick a state
</select>

<script type='text/javascript'>

  function loadCities()
  {
    $('#citySelect').load($('#stateSelect').val()); //this assumes files in same place.  otherwise you might need to put a path here
  }
</script>
  

В принципе, если формат соответствует вашему описанию, все, что вам нужно сделать, это загрузить содержимое определенного HTML-файла в то, что <select> я вызываю citySelect выше. Это может быть сделано полностью с помощью javascript, а с использованием библиотеки jQuery это в значительной степени тривиально.

Не зная, что происходит в остальной части вашей настройки, похоже, что вы пытаетесь создать набор файлов на сервере, по одному для каждого состояния, который содержит все параметры выбора для этого состояния. Это правильно? Кажется, что это трудный путь.

Вы уже используете jQuery на этом сайте? (Или у вас есть какие-либо возможности для использования такой библиотеки?) После этого вы сможете довольно легко использовать автозаполнитель. Смотрите здесь для получения более подробной информации и примера:http://docs.jquery.com/Plugins/autocomplete