динамический выпадающий ящик?

Я получил таблицу базы данных, называемую категорией, как показано:

введите описание изображения здесь

Я пытаюсь сделать динамический раскрывающийся список, а индексный скрипт показан как:

<?php try { $objDb = new PDO('mysql:host=localhost;dbname=test', 'root', ''); $objDb->exec('SET CHARACTER SET utf8'); $sql = "SELECT * FROM `category` WHERE `master` = 0"; $statement = $objDb->query($sql); $list = $statement->fetchAll(PDO::FETCH_ASSOC); } catch(PDOException $e) { echo 'There was a problem'; } ?> <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>Dependable dropdown menu</title> <meta name="description" content="Dependable dropdown menu" /> <meta name="keywords" content="Dependable dropdown menu" /> <link href="/css/core.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="/js/core.js" type="text/javascript"></script> </head> <body> <div id="wrapper"> <form action="" method="post"> <select name="gender" id="gender" class="update"> <option value="">Select one</option> <?php if (!empty($list)) { ?> <?php foreach($list as $row) { ?> <option value="<?php echo $row['id']; ?>"> <?php echo $row['name']; ?> </option> <?php } ?> <?php } ?> </select> <select name="category" id="category" class="update" disabled="disabled"> <option value="">----</option> </select> <select name="colour" id="colour" class="update" disabled="disabled"> <option value="">----</option> </select> </form> </div> </body> </html>

Файл update.php показан как:

 <?php if (!empty($_GET['id']) && !empty($_GET['value'])) { $id = $_GET['id']; $value = $_GET['value']; try { $objDb = new PDO('mysql:host=localhost;dbname=test', 'root', ''); $objDb->exec('SET CHARACTER SET utf8'); $sql = "SELECT * FROM `category` WHERE `master` = ?"; $statement = $objDb->prepare($sql); $statement->execute(array($value)); $list = $statement->fetchAll(PDO::FETCH_ASSOC); if (!empty($list)) { $out = array('<option value="">Select one</option>'); foreach($list as $row) { $out[] = '<option value="'.$row['id'].'">'.$row['name'].'</option>'; } echo json_encode(array('error' => false, 'list' => implode('', $out))); } else { echo json_encode(array('error' => true)); } } catch(PDOException $e) { echo json_encode(array('error' => true)); } } else { echo json_encode(array('error' => true)); }

Второй раскрывающийся список не отображает значения, зависящие от первого раскрывающегося списка, как показано:

введите описание изображения здесь

Может кто-то мне помочь, пожалуйста.

Solutions Collecting From Web of "динамический выпадающий ящик?"

Вот пример, который будет делать то, что вы хотите. По сути, вы можете использовать jQuery / AJAX для этого.

Я обновил свой примерный код, чтобы он соответствовал именам входа в сервер / имя таблицы / поля, поэтому, если вы скопируете эти два примера в файлы (назовите их tester.php и another_php_file.php ), то у вас должен быть полностью рабочий пример.

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

ФАЙЛ 1 – TESTER.PHP

 <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { //alert('Document is ready'); $('#stSelect').change(function() { var sel_stud = $(this).val(); //alert('You picked: ' + sel_stud); $.ajax({ type: "POST", url: "another_php_file.php", data: 'theOption=' + sel_stud, success: function(whatigot) { //alert('Server-side response: ' + whatigot); $('#LaDIV').html(whatigot); $('#theButton').click(function() { alert('You clicked the button'); }); } //END success fn }); //END $.ajax }); //END dropdown change event }); //END document.ready </script> </head> <body> <select name="students" id="stSelect"> <option value="">Please Select</option> <option value="John">John Doe</option> <option value="Mike">Mike Williams</option> <option value="Chris">Chris Edwards</option> </select> <div id="LaDIV"></div> </body> </html>

ФАЙЛ 2 – another_php_file.php

 <?php //Login to database (usually this is stored in a separate php file and included in each file where required) $server = 'localhost'; //localhost is the usual name of the server if apache/Linux. $login = 'root'; $pword = ''; $dbname = 'test'; mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error()); mysql_select_db($dbname) or die($connect_error); //Get value posted in by ajax $selStudent = $_POST['theOption']; //die('You sent: ' . $selStudent); //Run DB query $query = "SELECT * FROM `category` WHERE `master` = 0"; $result = mysql_query($query) or die('Fn another_php_file.php ERROR: ' . mysql_error()); $num_rows_returned = mysql_num_rows($result); //die('Query returned ' . $num_rows_returned . ' rows.'); //Prepare response html markup $r = ' <h1>Found in Database:</h1> <select> '; //Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters if ($num_rows_returned > 0) { while ($row = mysql_fetch_assoc($result)) { $r = $r . '<option value="' .$row['id']. '">' . $row['name'] . '</option>'; } } else { $r = '<p>No student by that name on staff</p>'; } //Add this extra button for fun $r = $r . '</select><button id="theButton">Click Me</button>'; //The response echoed below will be inserted into the echo $r;

Чтобы ответить на ваш вопрос в комментарии: «Как вы можете заполнить поля с двумя полями, которые относятся только к выбранному параметру из первого раскрывающегося списка?»

A. Внутри события .change для первого раскрывающегося списка вы читаете значение первого раскрывающегося списка:

$('#dropdown_id').change(function() { var dd1 = $('#dropdown_id').val(); }

B. В коде AJAX для вышеуказанного .change() вы включаете эту переменную в данные, которые вы отправляете во второй файл .PHP (в нашем случае «another_php_file.php»)

C. Вы используете эту переменную в вашем запросе mysql, тем самым ограничивая свои результаты. Эти результаты затем возвращаются к функции AJAX, и вы можете получить к ним доступ в случае success: часть функции AJAX

D. В этой функции успеха вы вводите код в DOM с пересмотренными значениями SELECT.

Это то, что я делаю в приведенном выше примере:

Пользователь выбирает имя студента, которое запускает селектор jQuery .change()
Вот строка, в которой он захватывает выбранную пользователем опцию:

var sel_stud = $(this).val();
Это значение отправляется в another_php_file.php через эту строку кода AJAX:

data: 'theOption=' + sel_stud,
Получающий файл another_php_file.php получает выбор пользователя здесь:

$selStudent = $_POST['theOption'];
Var $ selStudent (выбор пользователя, отправленный через AJAX) используется в поиске mysql:

$ query = "SELECT * FROM` category` WHERE `master` = 0 AND` name` = '$ selStudent' ";

(При изменении примера в соответствии с вашей базой данных ссылка на $ selStudent была удалена. Но это (здесь, выше) – это то, как вы его используете).
Теперь мы создаем новый блок кода <SELECT> , сохраняя HTML в переменной с именем $r . Когда HTML полностью построен, я возвращаю настроенный код обратно в процедуру AJAX, просто повторяя его:

echo $r;
Полученные данные (настраиваемый блок кода <SELECT> ) доступны нам внутри success: function() {//code block} AJAX success: function() {//code block} , и я могу ввести его в DOM здесь:

$('#LaDIV').html(whatigot);

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

Работает как браузер, отличный от Microsoft.