Как сделать селектор с привязкой к файлу PHP?

#php #javascript #html

Здравствуйте, как сделать селектор. Чтобы сначала был выбор стран, к стране были
прикреплены определенные города. Далее при выборе города открывалось содержимое файла
php привязанное к данному городу. Нужен полный цикл. Я могу не правильно объяснить,
но вот для наглядности вопроса сделал видео, что я имею ввиду в вопросе https://www.youtube.com/watch?v=fSxKDltA9-E
может оно поможет раскрыть вопрос.
Спасибо заранее за вашу помощь, с уважением.

Нужно типо такого http://codepen.io/ajaxray/pen/oBPbQe  Но после последнего действия
чтобы высвечивалось содержимое файла привязанного к городу.
    

Ответы

Ответ 1

Подгружайте данные через AJAX. Если Вы имеете ввиду что-то, подобное поиску городов
в VK, но там реализовано через AJAX запрос в БД.

Если же хотите брать из файла, то вешаете обработчик на изменение селектора страны.
При его срабатывании делаете запрос в AJAX к PHP-файлу со списками городов (там выбираете
нужную страну и отправляете список городов этой страны в ответе). В клиенте при получении
ответа от сервера вставляете этот список в селектор с городами.

По брать из файла не самая лучшая идея, т.к. при хорошей детализации городов будет
много. Вносите все геоданные в базу.

Шаг 1

Например, делаем AJAX-запрос через JQuery, где call.php - скрипт, который будет выдавать
нам список городов, а data - это то, что мы передаем в PHP-скрипт (в данном случае
требуется передать id страны, берем из селектора country_id). Пишем соответствующую
функцию:

function getCities() {
    var data = { country_id: document.getElementById('country_id').value };
    $.post('/call.php', { data: data }, function(result) {
        ...
    });
}


Шаг 2

В PHP-файле выбираем нужный нам массив со списком городов (на основе данных data):

$country_id = isset($_POST['data']['country_id']) ? $_POST['data']['country_id'] : NULL;
...
if ($country_id == 1) $result = array(array('city_id'=>'1', 'city_name'=>'Москва'),
array('city_id'=>'2', 'city_name'=>'Санкт-Петербург'));
else if ($country_id == 2) $result = array(array('city_id'=>'1', 'city_name'=>'Нью-Йорк'),
array('city_id'=>'2', 'city_name'=>'Сан-Франциско'));
...
echo json_encode($result, true);
exit();


Шаг 3

Далее возвращаемся в наш клиент и после получения ответа от сервера парсим полученный
JSON-массив, собираем html-код селектора и обновляем DOM.

$.post('/call.php', { data: data }, function(result) {
    result = JSON.parse(result);
    ...
    var html = '';
    result.forEach(function(data, index) {
        html += '' + data.city_name + '';
    });
    document.getElementById('city_id').innerHTML = html;
});


Где document.getElementById('city_id') - наш селектор со списком городов, city_id
- передаваемый в массиве айдишник города, а city_name - соответственно название города.

Шаг 4

В самом HTML уже должен быть код селекторов стран и городов. Селектор country_id
статичный, селектор city_id собирается динамически в зависимости от выбора страны.
Не забываем повесить на селектор country_id обработчик, который будет вызывать нашу
JS-функцию с AJAX-запросом. А на селектор с выбором города (city_id) вешаем обработчик,
который будет вызывать функцию открытия нужного файла.


    Россия
    США
    ...





Шаг 5

В функции openFile() прописываем пути к файлам, которые будут открываться в зависимости
от выбора города.

function openFile() {
    // vars
    var country_id = document.getElementById('country_id').value;
    var city_id = document.getElementById('city_id').value;
    // locations
    if (country_id == 1 && city_id == 1) window.location = 'https://aviareysi.ru/moscow.php';
    else if (country_id == 1 && city_id == 2) window.location = 'https://aviareysi.ru/peterburg.php';
}


Если городов достаточно много, то можно засунуть это в AJAX, но в самом простом варианте
можно брать напрямую из JS-файла.


Ответ 2

Все проще. Схема такова: 

Шаг 1:

Создаешь  добавляешь туда все города которые нужны. Создаешь папку
cities и создаешь в ней сколько нужно php файлов с описанием городов.

Шаг 2:

Добавляешь , (жеоаетльно чтобы плейсхолдер имя_города
совпадал с именем файла с городом). Создаешь кнопку поиска.

Шаг 3:

Создаешь  ниже и добавляешь такие скрипты в JS (я на jQuery)

var currentCityValue;

$("select").change(function(){
  currentCityValue = $(this).val();
});

$("#searchButton").click(function(){
  $("iframe").attr("src", currentCityValue + ".php");
});


Так как я не знаю чего ты там удумал с эти делать, покажу на примере разных сайтов: 



var currentSiteValue;

$("select").change(function(){
  currentSiteValue = $(this).val();
});

$("#search").click(function(){
  $("iframe").attr("src", currentSiteValue);
});
iframe {display: block; width: 400px; margin: 20px; height: 300px;}



Выберите сайт
Site
1
Site
2








Главное, чтобы на сайте не стояли "Header X-Frame-Options". Но думаю идею ты понял.
Может она и не лучшая, но все таки юзабельная.

UPDATE

Вот обещанный файл: скачать тут, если что вирусов нет.