den giver en jquery fejl, hvilke kan være noget af problemet, så du får retuneret en hel html side (det er en fejl)
hvorfor har du includeret jquery 2 gange ??
ln 13
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
og ln 18
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
ln 18 går lige ind og smadre alle dine jquery variable, slet ln 18
jeg prøvede lige at skære din side ned (ville lige teste PDO)
her er hele coden jeg tester med (virker)
type:"POST" // post skrevet med stort uden betydning
url:"getid.php" // tiiføjet php
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="description" content="forum"/>
<meta name="keywords" content="forum"/>
<title>forum</title>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="http://www.virtualmanageravis.dk/mvc/public/css/default.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/sunny/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.virtualmanageravis.dk/mvc/public/js/custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".country").change(function(){
$id = $(this).val();
$.ajax({
type:"POST",
url:"getid.php",
data:"id="+$id,
cache:"false",
success:function(html){
$("#city").html(html);
}
});
});
});
</script>
</head>
<body>
<div class="outer_selector">
<select class="country">
<option selected="selected">Select Country</option>
<option value="1">Danmark</option>
<option value="2">Sverige</option>
</select>
</div>
<div class="outer_selector">
<select id="city">
<option value="">Select Country first</option>
</select>
</div>
</body>
</html>
her er der intet du skal ændres, har kun ændret afh egen db
getid.php
<?php
function MySqlPdo($db="test"){
$hostname = 'localhost';
$username = 'root';
$password = '';
try {
$dbh = new PDO("mysql:host=$hostname;dbname=$db;charset=utf8", $username, $password);
}
catch(PDOException $e){
echo $e->getMessage();
}
return $dbh;
}
$id = $_POST['id'];
// $database = new Database(DB_TYPE,DB_HOST,DB_NAME,DB_USER,DB_PASS);
$database = MySqlPdo();
$sth = $database->prepare("SELECT * FROM byer_under_kategorier WHERE under_kat_overkat_ref = :id");
$sth->bindValue(':id', $id, PDO::PARAM_INT);
$sth->execute();
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
foreach($result as $key => $rows){
$cityid= $rows['under_kat_id'];
$cityname = $rows['under_kat_name'];
echo '<option id="'.$cityid.'">'.$cityname.'</option>';
}
?>
test sql
CREATE TABLE IF NOT EXISTS `byer_under_kategorier` (
`under_kat_id` int(11) NOT NULL AUTO_INCREMENT,
`under_kat_name` text COLLATE utf8_danish_ci NOT NULL,
`under_kat_overkat_ref` int(11) NOT NULL,
PRIMARY KEY (`under_kat_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_danish_ci AUTO_INCREMENT=5 ;
--
-- Data dump for tabellen `byer_under_kategorier`
--
INSERT INTO `byer_under_kategorier` (`under_kat_id`, `under_kat_name`, `under_kat_overkat_ref`) VALUES
(1, 'københavn', 1),
(2, 'ålborg', 1),
(3, 'århus', 1),
(4, 'malmø', 2);
tilføjet
chrome
F12 (dev tools)
XHR -> Headers =>
Request URL:
http://localhost/test/udvikleren/PHP%20AJAX%20select%20option%20box%20dynamisk/getid.phpRequest Method
OST
Status Code:200 OK
......
Form Data : id:1
XHR -> Response => <option id="1">københavn</option><option id="2">ålborg</option><option id="3">århus</option>
men jeg er nu mest til FF med FireBug, men man skal jo træne i udviklings toos i andre browsere også
Indlæg senest redigeret d. 29.01.2013 19:11 af Bruger #16075