我正在创建2个下拉列表，第二个下拉列表基于第一个下拉列表的选择。从mysql数据库中检索数据
-- phpMyAdmin SQL Dump
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 01, 2013 at 12:44 PM
-- Server version: 5.5.24-log
-- PHP Version: 5.4.3
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `lam_el_chamel_db`
--
-- --------------------------------------------------------
--
-- Table structure for table `country`
--
CREATE TABLE IF NOT EXISTS `country` (
`country_id` int(11) NOT NULL,
`country_name` varchar(45) NOT NULL,
PRIMARY KEY (`country_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `country`
--
INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'Lebanon'),
(2, 'Afghanistan'),
(3, 'Albania'),
(4, 'Algeria'),
(5, 'Andorra'),
(6, 'Angola'),
(7, 'Antigua and Barbuda'),
(8, 'Argentina'),
(9, 'Armenia'),
(10, 'Australia'),
(11, 'Austria'),
(12, 'Azerbaijan'),
(13, 'Bahamas'),
(14, 'Bahrain'),
(15, 'Bangladesh'),
(16, 'Barbados'),
(17, 'Belarus'),
(18, 'Belgium'),
(19, 'Belize'),
(20, 'Benin '),
(21, 'Bhutan'),
(22, 'Bolivia'),
(23, 'Bosnia and Herzegovina'),
(24, 'Botswana'),
(25, 'Brazil'),
(26, 'Brunei '),
(27, 'Bulgaria'),
(28, 'Burkina Faso'),
(29, 'Burma'),
(30, 'Burundi'),
(31, 'Cambodia'),
(32, 'Cameroon'),
(33, 'Canada'),
(34, 'Cape Verde'),
(35, 'Central African Republic'),
(36, 'Chad'),
(37, 'Chile'),
(38, 'China'),
(39, 'Colombia'),
(40, 'Comoros '),
(41, 'Congo'),
(42, 'Costa Rica'),
(43, 'Cote d''Ivoire'),
(44, 'Croatia'),
(45, 'Cuba'),
(46, 'Cyprus'),
(47, 'Czech Republic'),
(48, 'Denmark'),
(49, 'Djibouti'),
(50, 'Dominica'),
(51, 'Ecuador'),
(52, 'Egypt'),
(53, 'Estonia'),
(54, 'Ethiopia'),
(55, 'Fiji'),
(56, 'Finland'),
(57, 'France'),
(58, 'Georgia'),
(59, 'Germany'),
(60, 'Ghana'),
(61, 'Greece'),
(62, 'Guatemala'),
(63, 'Guinea'),
(64, 'Haiti'),
(65, 'Hong Kong'),
(66, 'Hungary'),
(67, 'Iceland'),
(68, 'India'),
(69, 'Indonesia'),
(70, 'Iran'),
(71, 'Iraq'),
(72, 'Ireland'),
(73, 'Italy'),
(74, 'Jamaica'),
(75, 'Japan'),
(76, 'Jordan '),
(77, 'Kazakhstan'),
(78, 'Korea, North'),
(79, 'Korea, South'),
(80, 'Kosovo'),
(81, 'Kuwait'),
(82, 'Laos'),
(83, 'Latvia'),
(84, 'Libya'),
(85, 'Luxembourg'),
(86, 'Madagascar'),
(87, 'Malaysia'),
(88, 'Maldives'),
(89, 'Mali'),
(90, 'Malta'),
(91, 'Mauritania'),
(92, 'Mexico'),
(93, 'Moldova'),
(94, 'Monaco'),
(95, 'Montenegro'),
(96, 'Morocco'),
(97, 'Mozambique'),
(98, 'Nepal'),
(99, 'Netherlands'),
(100, 'New Zealand'),
(101, 'Nicaragua'),
(102, 'Nigeria'),
(103, 'Norway'),
(104, 'Oman'),
(105, 'Pakistan'),
(106, 'Palestinian'),
(107, 'Panama'),
(108, 'Paraguay'),
(109, 'Peru'),
(110, 'Philippines'),
(111, 'Poland'),
(112, 'Portugal'),
(113, 'Qatar'),
(114, 'Romania'),
(115, 'Russia'),
(116, 'Saudi Arabia'),
(117, 'Senegal'),
(118, 'Serbia'),
(119, 'Singapore'),
(120, 'Slovakia'),
(121, 'Slovenia'),
(122, 'Spain '),
(123, 'Sri Lanka'),
(124, 'Sudan'),
(125, 'Swaziland '),
(126, 'Sweden'),
(127, 'Syria'),
(128, 'Taiwan'),
(129, 'Tanzania'),
(130, 'Thailand '),
(131, 'Tunisia'),
(132, 'Turkey'),
(133, 'Ukraine'),
(134, 'United Arab Emirates'),
(135, 'United Kingdom'),
(136, 'Uruguay'),
(137, 'Uzbekistan'),
(138, 'Venezuela'),
(139, 'Vietnam'),
(140, 'Yemen'),
(141, 'Zambia'),
(142, 'Zimbabwe ');
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
-- phpMyAdmin SQL Dump
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 01, 2013 at 12:45 PM
-- Server version: 5.5.24-log
-- PHP Version: 5.4.3
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `lam_el_chamel_db`
--
-- --------------------------------------------------------
--
-- Table structure for table `governorate`
--
CREATE TABLE IF NOT EXISTS `governorate` (
`governorate_id` int(11) NOT NULL,
`governorate_name` varchar(60) NOT NULL,
`country_id` int(11) NOT NULL,
PRIMARY KEY (`governorate_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `governorate`
--
INSERT INTO `governorate` (`governorate_id`, `governorate_name`, `country_id`) VALUES
(1, 'Beirut', 1),
(2, 'Mount Lebanon', 1),
(3, 'North', 1),
(4, 'Beqaa ', 1),
(5, 'Nabatiye', 1),
(6, 'South', 1);
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playing With Select list</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_category.php",
data: dataString,
cache: false,
success: function(html)
{
$(".governorate").html(html);
}
});
});
});
</script>
</head>
<body>
<div class="container">
<header>
<h1><strong>Playing With Select List</strong></h1>
<h2>Select One List To see Output On Other</h2>
</header>
</div>
<span style="margin-left:22%">
<label>country :</label> <select name="country" class="category">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("select country_id,country_name from country");
while($row=mysql_fetch_array($sql))
{
$id=$row['country_id'];
$data=$row['country_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
} ?>
</select>
<div class="governorate">
<label>Governorate :</label> <select name="governorate" class="subcategory">
<option selected="selected">--Select governorate--</option>
</select>
</div>
</span>
<br><br><br>
<h1><center><strong>Go To-:<a href="www.tricktodesign.com">TrickToDesign</a></strong></center></h1>
</body>
</html>
<?php
include('db.php');
if($_POST['governorate_id'])
{
$id=$_POST['governorate_id'];
$sql=mysql_query("select b.governorate_id,b.governorate_name from governorate a,contry_id b where b.country_id=a.country_id and parent='$id'");
while($row=mysql_fetch_array($sql))
{
//$id=$row['governorate_id'];
//$data=$row['governorate_name'];
echo"<select name='governorate'>";
echo '<option value="'.$id.'">'.$data.'</option>';
echo "</select>";
}
}
?>
如何使第二个下拉列表中显示数据，这是我面临的错误
PS：我编辑索引.php和ajax_category.php
答案 0 :(得分：4)
您的代码：
success: function(html)
{
$(".governorate").html(html);
}
但你的html中没有governorate课程
更改你的代码:(注意包装的div）
<div class="governorate">
<select name="governorate" class="subcategory">
<option selected="selected">--Select governorate--</option>
</select>
<div>
在php页面中：
echo "<select name=....>";
echo '<option value="'.$id.'">'.$data.'</option>';
echo "</select>";
答案 1 :(得分：2)
您正在访问Jquery中的下拉列表(".governorate")。但是你的下拉列表中没有任何课程。只需在其中添加一个类。将代码更改为，
$("select[name='governorate']").html(html);
答案 2 :(得分：0)
<强>的index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playing With Select list</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id = $(this).val();
$.getJSON('new_category.php?id='+id+'', function(data) {
$('.governorate').html("");
$('.governorate').append('<option value=0>--Select governorate--</option>');
$(data).each(function(){
$('.governorate').append('<option value='+this.governorate_id+'>'+this.governorate_name+'</option>');
});
});
});
});
</script>
</head>
<body>
<div class="container">
<header>
<h1><strong>Playing With Select List</strong></h1>
<h2>Select One List To see Output On Other</h2>
</header>
</div>
<span style="margin-left:22%">
<label>country :</label> <select class="country" >
<option selected="selected">--Select Country--</option>
<?php
include('connect.php');
$sql=mysql_query("select country_id,country_name from test1.country");
while($row=mysql_fetch_array($sql))
{
$id=$row['country_id'];
$data=$row['country_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
} ?>
</select>
<label>Governorate :</label> <select class="governorate" >
<option selected="selected">--Select governorate--</option>
</select>
</span>
<br><br><br>
<h1><center><strong>Go To-:<a href="www.tricktodesign.com">TrickToDesign</a></strong></center></h1>
</body>
</html>
<强> new_category.php
<?php
include('connect.php');
header("Content-type: text/javascript");
$id=$_GET['id'];
$sql=mysql_query("SELECT governorate_id, governorate_name FROM test1.governorate WHERE country_id=$id");
while($row=mysql_fetch_array($sql))
{
$gArray['governorate_id'] = $row['governorate_id'];
$gArray['governorate_name'] = $row['governorate_name'];
$g[] = $gArray;
}
echo json_encode($g);
?>
简要说明：
在get参数中发送所选国家ID，getJson方法将检索一个json列表，其中包含根据id的省级详细信息。那么jquery中的每个函数都会附加你的详细信息..