私は単純な動的ドロップリストを作成しています.2番目のドロップリストは最初のドロップリストの選択に基づいていますが、問題は最初のドロップリストには何も入力されないため、2番目のドロップリストを使用できません.
dbconfig.php
<?php
$host = "localhost";
$user = "****";
$password = "******";
$db = "cat";
?>
select.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#type").attr("disabled","disabled");
$("select#category").change(function(){
$("select#type").attr("disabled","disabled");
$("select#type").html("<option>wait...</option>");
var id = $("select#category option:selected").attr('value');
$.post("select_type.php", {id:id}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
$("form#select_form").submit(function(){
var cat = $("select#category option:selected").attr('value');
var type = $("select#type option:selected").attr('value');
if(cat>0 && type>0)
{
var result = $("select#type option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose two options!");
}
return false;
});
});
</script>
</head>
<body>
<?php include "select.class.php"; ?>
<form id="select_form">
Choose a category:<br />
<select id="category">
<?php echo $opt->ShowCategory(); ?>
</select>
<br /><br />
choose a type:<br />
<select id="type">
<option value="0">choose...</option>
</select>
<br /><br />
<input type="submit" value="confirm" />
</form>
<div id="result"></div>
</body>
</html>
_class.php を選択
<?php
class SelectList
{
protected $conn;
public function __construct()
{
$this->DbConnect();
}
protected function DbConnect()
{
include "dbconfig.php";
$this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
mysql_select_db($db,$this->conn) OR die("can not select the database $db");
return TRUE;
}
public function ShowCategory()
{
$sql = "SELECT * FROM category";
$res = mysql_query($sql,$this->conn);
$category = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$category .= '<option value="' . $row['id_cat'] . '">' . $row['name'] . '</option>';
}
return $category;
}
public function ShowType()
{
$sql = "SELECT * FROM type WHERE id_cat=$_POST[id]";
$res = mysql_query($sql,$this->conn);
$type = '<option value="0">choose...</option>';
while($row = mysql_fetch_array($res))
{
$type .= '<option value="' . $row['id_type'] . '">' . $row['name'] . '</option>';
}
return $type;
}
}
$opt = new SelectList();
?>
select_type.php
<?php
include "select.class.php";
echo $opt->ShowType();
?>
テーブル構造
CREATE TABLE IF NOT EXISTS `categories` (
`id_cat` int(4) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(40) NOT NULL,
PRIMARY KEY (`id_cat`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
--
-- Dumping data for table `categories`
--
INSERT INTO `categories` (`id_cat`, `name`) VALUES
(1, 'colours'),
(2, 'flowers'),
(3, 'tools');
-- --------------------------------------------------------
--
-- Table structure for table `type`
--
CREATE TABLE IF NOT EXISTS `type` (
`id_type` int(4) unsigned NOT NULL AUTO_INCREMENT,
`id_cat` int(4) unsigned NOT NULL,
`name` varchar(40) NOT NULL,
PRIMARY KEY (`id_type`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;
--
-- Dumping data for table `type`
--
INSERT INTO `type` (`id_type`, `id_cat`, `name`) VALUES
(1, 1, 'yellow'),
(2, 1, 'green'),
(3, 1, 'red'),
(4, 1, 'gray'),
(5, 1, 'white'),
(6, 2, 'daisy'),
(7, 2, 'cowslip'),
(8, 2, 'lily'),
(9, 2, 'sunflower'),
(10, 3, 'hammer'),
(11, 3, 'screwdriver'),
(12, 3, 'spatula'),
(13, 3, 'wrench'),
(14, 3, 'clamp');
/*!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 */;