Я пытаюсь заполнить третий набор радиообъектов в качестве дополнения к следующему сценарию: http://www.electrictoolbox.com/json-data-jquery–php-radio-buttons/
По какой-то причине я не могу заполнить третий набор соответствующими данными. Он просто остается пустым 🙁
Вызов функции populateFruitVariety() возвращает только [ ] , а populateFruitVariety() корректно возвращает json-данные.
getdata.php (соединение с БД / выборка данных)
<?php $dsn = "mysql:host=localhost;dbname=mydb"; $username = "username"; $password = "password"; $pdo = new PDO($dsn, $username, $password); $rows = array(); if(isset($_GET['fruitName'])) { $stmt = $pdo->prepare("SELECT DISTINCT variety FROM fruit WHERE name = ? ORDER BY variety"); $stmt->execute(array($_GET['fruitName'])); $rows[] = $stmt->fetchAll(PDO::FETCH_ASSOC); } if(isset($_GET['fruitVariety'] )) { $stmt = $pdo->prepare("SELECT DISTINCT fruittype FROM fruit WHERE variety = ? ORDER BY fruittype"); $stmt->execute(array($_GET['fruitVariety'])); $rows[] = $stmt->fetchAll(PDO::FETCH_ASSOC); } echo json_encode($rows); ?>
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Toevoegen</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script language="javascript" type="text/javascript"> function populateFruitVariety() { var fruitName = $('input[name=fruitName]:checked').val(); $.getJSON('getdata.php', {fruitName: fruitName}, function(fruit) { var html = ''; $.each(fruit, function(index, array) { html = html + '<label><input type="radio" name="fruitVariety" value="' + array['variety'] + '" />' + array['variety'] + '</label> '; }); $('#varieties').html(html); }); } function populateFruittype() { var fruitVariety = $('input[name=fruitVariety]:checked').val(); $.getJSON('getdata.php', {fruitVariety: fruitVariety}, function(fruit) { var html = ''; $.each(fruit, function(index, array) { html = html + '<label><input type="radio" name="fruitType" value="' + array['fruittype'] + '" />' + array['fruittype'] + '</label> '; }); $('#fruittype').html(html); }); } $(function() { $('input[name=fruitName]').change(function() { populateFruitVariety(); }); }); $(function() { $('input[name=fruitVariety]').change(function() { populateFruittype(); }); }); </script> </head> <body> <form> <div> <strong>Fruit:</strong> <label><input type="radio" name="fruitName" value="Apple"/>Apple</label> <label><input type="radio" name="fruitName" value="Banana"/>Banana</label> <label><input type="radio" name="fruitName" value="Orange"/>Orange</label> <label><input type="radio" name="fruitName" value="Pear"/>Pear</label> </div> <div> <strong>Variety:</strong> <span id="varieties"></span> </div> <div> <strong>Type:</strong> <span id="fruittype"></span> </div> </form> </body> </html>
Запрос и содержимое БД можно найти здесь: http://www.electrictoolbox.com/mysql-example-table/
Просто добавь:
`fruittype` varchar(50) NOT NULL
и заполнить его некоторыми пользовательскими значениями.
Задача решена.
.change(function() должен был быть .live('click', function()