Установите опцию, доступную для выбора, на основе другого выбора php

61
5

Таблица континентов


    ASIA
    ЮЖНАЯ АМЕРИКА

Таблица стран


    Япония
    Китай
    Бразилия
    Перу

Это данные в моей таблице, и я получаю все данные из таблицы континентов и таблицы стран, как это показано


    <select name="continent" class='required InputBox'>
<?php echo "<option value=''></option>";
foreach (Contintent() as $value) {
echo "<option id='" . $value[ 'sysid'] . "' value='" . $value[ 'name'] . "'>" . $value[ 'name'] . "</option>"; } ?>
</select>

Это для страны


<select name="country" class='required InputBox'>
<?php echo "<option value=''></option>";
foreach (Country() as $value) {
echo "<option id='" . $value[ 'sysid'] . "' value='" . $value[ 'name'] . "'>" . $value[ 'name'] . "</option>"; } ?>
</select>

Я хочу знать, как сделать это таким образом, что, когда я выбираю континент, например, азия, вариант, доступный для округа, будет страной только в Азии, которая является Японией и Китаем. У меня также есть другая таблица после этого, которая является городом, но если я получу логику, я могу применить ее к городу. Любая идея оценена


"UPDATE"


Найденное здесь


То, что я не знаком с ajax, может кто-нибудь попытаться объяснить, как он работает, я хочу знать, как я могу передать идентификатор выбора из этого фрагмента javascript на мою страницу функций php, вот фрагмент..


$('.continent').change(function() {
var id = $(this).find(':selected')[0].id;
//alert(id);
$.ajax({
type:'POST',
url:'../include/functions.php',
data:{'id':id},
success:function(data){
// the next thing you want to do
console.log(data);
alert(id);
}
});

});


в моей функции php


function Country(){
if(isset($_POST['id'])){
echo $_POST['id'];
}
}

Проблема заключается в том, что значение id не передается, как передать его на function.php. Это произошло в success:function(data){, что я буду делать дальше?


FYI


Предупреждение о том, что он получает идентификатор континента, он просто не передается функции function.php
и console.log ничего не пишет
и когда я изменяю url на главную страницу, на странице, где select находятся в console.log, возвращает код главной страницы.

спросил(а) 2021-01-19T18:59:50+03:00 2 месяца, 3 недели назад
1
Решение
86

Как было сказано, вы можете использовать ajax.
Существует статический не-ajax способ сделать это, но таким образом, это лучше в долгосрочной перспективе.


В основном, то, что вы делаете с этим jQuery, - это прослушивание изменений в поле выбора континентов, а когда происходит изменение, вы обращаетесь к серверу с просьбой: "Дайте мне все страны на этом континенте". У вас должна быть база данных для этого или вы можете сопоставить их в статических объектах, чтобы проверить ее.


$('.continent').change(function() {
var id = $(this).val(); //get the current value option
$.ajax({
type:'POST',
url:'<path>/getCountries',
data:{'id':id},
success:function(data){
//in here, for simplicity, you can substitue the HTML for a brand new select box for countries
//1.
$(".countries_container").html(data);

//2.
// iterate through objects and build HTML here
}
});
});


Это, конечно же, добавит countries_container в HTML, как и внутри него, вы будете отображать select:


<div class="countries_container"></div>

Теперь на стороне сервера PHP (getCountries) вы можете сделать что-то вроде:

$id = $_POST['id'];
if(isset($id) && <other validations>)){

// 1. your query to get countries from a given continent
// and for each result you can build the HTML itself

// 2. OR, a better solution is to return an Object and then in the
// success:function(data){ } iterate through it
}


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


Кроме того, вы должны проверить:


Jquery ajax заполняет выпадающее меню с данными ответа json


Демо связанного выпадающего списка с помощью Ajax и PHP


Имейте в виду, что это были первые результаты поиска Google, поэтому в следующий раз попробуйте выполнить поиск в самом стеке, чтобы избежать дублирования вопросов.

ответил(а) 2021-01-19T18:59:50+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема