Каскадный выбор

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

Вот jquery, который у меня есть сейчас:

function tester() { $("select#type").attr('disabled', 'disabled'); $("select#cat").change(function(){ var vid = $("select#cat option:selected").attr('value'); var request = $.ajax({ url: "show_type.php", type: "POST", data: {id : vid} }); request.done(function(msg) { $("#result").html( msg ); }); request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); }); }); } 

Не обращайте внимания на первую часть кода с select#type и select#cat поскольку они предназначены для того, что я пытался сначала заполнить код, но .change – это мой триггер для запроса .ajax . Остальная часть кода я просто пытаюсь сбрасывать простое сообщение возврата в пустой div#result при успешном запросе ajax.

Я проверил тест, и var vid заполняется правильно.

Вот простой PHP-файл, который я пытаюсь вызвать с помощью ajax :

 <?php $requ; if (isset($_POST['id'])) { $requ = 'Worked'; } else { $requ = "didn't work"; } echo $requ; ?> 

Я думал, что проблема в том, что id не передавался должным образом, поэтому я изменил PHP-скрипт, чтобы дать мне какой-либо действительный результат независимо от того, был ли установлен параметр $_POST или нет.

Я не буду публиковать HTML-код, поскольку я просто пытаюсь сбрасывать все это в div пока я его тестирую. Когда я запускаю сценарий, я получаю сообщение об ошибке «Ошибка запроса» с сообщением «error».

Вот еще один jquery & PHP, который я также пробовал, используя .post вместо .ajax :

 function tester() { $("select#type").attr('disabled', 'disabled'); $("select#cat").change(function(){ $("select#type").html("<option>wait...</option>"); var vid = $("select#cat option:selected").attr('value'); $.post("show_type.php", {id:vid}, function(data){ $("#result").empty().append(data); }, "json"); }); } , function tester() { $("select#type").attr('disabled', 'disabled'); $("select#cat").change(function(){ $("select#type").html("<option>wait...</option>"); var vid = $("select#cat option:selected").attr('value'); $.post("show_type.php", {id:vid}, function(data){ $("#result").empty().append(data); }, "json"); }); } 

И PHP для сопровождения этого конкретного jquery:

 $requ = $_POST['id']; $ret = 'You selected: ' . $requ; echo json_encode($ret); 

Опять же, все это провалилось. Я также попробовал вышеуказанный код без использования json encoding / parameters. Все, что я хочу сделать, это простой (так я думаю) каскадный выбор dropboxes. Второй ящик будет зависеть от выбора первых ящиков. Я начинаю думать, что все это может не стоить того, и строго придерживаться PHP со ссылками для повторной отправки страницы с помощью GET и заполнения нового раздела или div с результатами первого щелчка. Любая помощь или предложения, которые могут вам понравиться, были бы очень благодарны, я потратил 2 дня, пытаясь понять все это. заранее спасибо

Related of "Каскадный выбор"

Хорошо, я исправился. Благодаря Mian_Khurram_ljaz заставив меня взглянуть на иерархическую структуру файла. Я предполагал, что, поскольку js вызывает php-файл, поместив php-файл в ту же папку, что и js, я мог бы вызвать php, используя url: show_type.php но это было фактически неправильно. Структура рассматривается с фактической страницы, ссылающейся на js и php, и поэтому url должен был быть js/show_type.php так как у меня был файл show_type.php в моей папке js.

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

 function project() { $("select#model2").attr('disabled', 'disabled'); $("select#brand2").attr('disabled', 'disabled'); $("select#project").change(function(){ $("select#model2").attr('disabled', 'disabled'); // if changed after last element has been selected, will reset last boxes choice to default $("select#model2").html('<option selected="selected">Choose...</option>'); $("select#brand2").html("<option>Please wait...</option>"); var pid = $("select#project option:selected").attr('value'); $.post("handler/project.php", {id:pid}, function(data){ $("select#brand2").removeAttr("disabled"); $("select#brand2").html(data); }); }); $("select#brand2").change(function(){ $("select#model2").html("<option>Please wait...</option>"); var bid = $("select#brand2 option:selected").attr('value'); var pid = $("select#project option:selected").attr('value'); $.post("handler/projBrand.php", {proj: pid, bran: bid}, function(data){ $("select#model2").removeAttr("disabled"); $("select#model2").html(data); }); }); } 

Просто вызовите функцию в $(document).ready вашего js.

Обратите внимание на комментарий, имеющий этот «избыточный» вызов, чтобы отключить и принудительно установить последнее поле для выбора значения по умолчанию, на всякий случай, когда пользователь делает выбор во всех трех блоках, но возвращается в первый квадрат и меняет выбор.

Вот файл обработчика php:

 <?php include_once('../includes/file.inc'); $request = $opt -> getModelvBrand(); echo $request; ?> 

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

И, наконец, HTML:

 <form action="" method="post"> <select id="project"> <option value="0">Choose...</option> <?php echo $opt -> getProject();?> //populates first box on page load </select> <select id="brand2"> <option value="0">Choose...</option> </select> <select id="model2"> <option value="0">Choose...</option> </select> <br /><br /> <input class="like-button" type="submit" title="Submit" value="" /> </form> 

Еще раз спасибо Mian за то, что заставило меня взглянуть на мои файлы.

Надеюсь, этот код поможет кому-то еще в ближайшем будущем.