0
我希望它這樣，當該類別的書籍選擇了另一個下拉出現，顯示圖書分類，但是這似乎並不奏效：jQuery的顯示/隱藏DIV下拉不工作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="jquery.js" type="text/javascript"></script>
<script>
$('#category').change(function() {
if ($(this).val() == 'Books') {
$('#p_bookcat').show();
} else {
$('#p_bookcat').hide();
}
});
</script>
</head>
<body>
<p> <label for="category"><b>Category</b> </label>
<select name="category" id="category">
<option value=""> -- select -- </option>
<option value="Accessories">Accessories</option>
<option value="Accommodation">Accommodation</option>
<option value="Books">Books</option>
<option value="Business">Business</option>
<option value="Clothing">Clothing</option>
<option value="Electronics">Electronics</option>
<option value="Furniture">Furniture</option>
<option value="Imagery">Imagery</option>
<option value="Multi">Multimedia</option>
<option value="Tickets">Tickets</option>
</select>
</p>
<p id="p_bookcat" style="display: none;">
<label for="bookcat"><b>Book Category</b> </label>
<select name="bookcat" id="bookcat">
<option value=""> -- select -- </option>
<option value="Law">Law</option>
<option value="Business">Business</option>
<option value="Optom">Optom</option>
<option value="Engineering">Engineering</option>
<option value="Pharmacy">Pharmacy</option>
<option value="Sciences">Sciences</option>
<option value="Languages">Languages</option>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Other">Other</option>
</select>
</p>
</body>
</html>
編輯：
我意識到這個工作，但是當我加入我的頭它停止工作：
<?php
// Inialize session
session_start();
// Check, if username session is NOT set then this page will jump to login page
if (!isset($_SESSION['username'])) {
header('Location: login.php');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#category').change(function() {
if ($(this).val() == 'Books') {
$('#p_bookcat').show();
} else {
$('#p_bookcat').hide();
}
});
});
</script>
</head>
<body>
<div id="header">
<div id="search">
<center>
<form method="GET" action="search.php" style= "padding: 1px; font-family: Tahoma, Geneva, sans-serif;">
<input name="search" id="s" type="text" value="<?php echo $_GET['search']; ?>" size="20" />
<select name="category" id="category" >
<?php if(isset($_GET['submit'])) { ?>
<option value="<?php echo $_GET['category']; ?>" selected="selected"><?php echo $_GET['category']; ?></option>
<?php }else{ ?>
<option value=""> Categories: </option>
<?php } ?>
<option value="">All</option>
<option value="Accessories">Accessories</option>
<option value="Accommodation">Accommodation</option>
<option value="Books">Books</option>
<option value="Business">Business</option>
<option value="Clothing">Clothing</option>
<option value="Electronics">Electronics</option>
<option value="Furniture">Furniture</option>
<option value="Imagery">Imagery</option>
<option value="Multi">Multimedia</option>
<option value="Tickets">Tickets</option>
</select>
<input name="price" id="price" type="hidden" value="ASC" />
<select name="university" id="university" >
<option value="">Aston University</option>
</select>
<input type="hidden" name="start" value="0" />
<input type="hidden" name="limit" value="4" />
<input id="searchSubmit" type="submit" value="" name="submit"/>
</form>
</center>
</div>
<a href="index.php"><div id="imagelogo">
<img src="images/box-fb.jpg" width="290" height="180"/>
</div></a>
<div id="imagelogotext">
<em>Where's your Ad @ ?</em>
</div>
<div id="navigation" name="navigation">
<ul>
<li><a href="index.php" style="padding-top: 3px;"><img src="images/home.png" width="25px" height="25px"/></a></li>
<li><a href="search.php">Search</a></li>
<li><a href="securedpage1.php">Post Ad</a></li>
<li><a href="selling.php">Buy/Sell</a></li>
<li><a href="faq.php">FAQ</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="aboutus.php">About Us</a></li>
</ul>
</div>
<div id="account">
<?php
if(isset($_SESSION['username'])){
echo "<a href='securedpage1.php'>My Account</a><img src='images/uni-icon.png' width='30' height='18' style='vertical-align: middle;'/>";
}else{
echo "<a href='login.php' >Login</a><img src='images/uni-icon.png' width='30' height='18' style='vertical-align: middle;'/>";
}
?>
</div>
<div id="registerlogout">
<?php
if(isset($_SESSION['username'])){
echo "<a href='logout.php'>Logout</a>";
}else{
echo "<a href='register.php'> Register</a>";
}
?>
</div>
</div>
<center>
<center>
</div>
<p> <label for="category"><b>Category</b> </label>
<select name="category" id="category">
<option value=""> -- select -- </option>
<option value="Accessories">Accessories</option>
<option value="Accommodation">Accommodation</option>
<option value="Books">Books</option>
<option value="Business">Business</option>
<option value="Clothing">Clothing</option>
<option value="Electronics">Electronics</option>
<option value="Furniture">Furniture</option>
<option value="Imagery">Imagery</option>
<option value="Multi">Multimedia</option>
<option value="Tickets">Tickets</option>
</select>
</p>
<p id="p_bookcat" style="display: none;">
<label for="bookcat"><b>Book Category</b> </label>
<select name="bookcat" id="bookcat">
<option value=""> -- select -- </option>
<option value="Law">Law</option>
<option value="Business">Business</option>
<option value="Optom">Optom</option>
<option value="Engineering">Engineering</option>
<option value="Pharmacy">Pharmacy</option>
<option value="Sciences">Sciences</option>
<option value="Languages">Languages</option>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Other">Other</option>
</select>
</p>
<p>
<label><b>Ad Title</b> </label>
<input type="text"id="fname" style="width: 300px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" name="fname" maxlength="90" />
</p>
<p>
<label><b>Description</b> </label>
<textarea id="lname" name="lname" cols="40" rows="5" maxlength="420"></textarea>
</p>
<p> <label for="conditional"><b>Condition </b> </label>
<select name="conditional" id="conditional">
<option value=""> -- select -- </option>
<option value="Brand New">Brand New</option>
<option value="Like New">Like New</option>
<option value="Very Good">Very Good</option>
<option value="Good">Good</option>
<option value="Adequate">Adequate</option>
<option value="Damaged">Damaged</option>
</select>
</p>
<p><label><b>Contact</b> </label>
<input type="text" style="width: 300px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"id="contact" name="contact" maxlength="30" />
</p>
<p>
<label><b>Price</b> £</label>
<script>
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<input type="text" name="price" maxlength="5" onkeypress="return onlyNumbers();"/>
</p>
<p><label><b>Choose Image</b> </label>
<script>
window.onload = function() {
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var max_size = 3670016; // Max file size
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
// console.log(f.size);
if(f.size > max_size) { // Check if file size is larger than max_size
alert("Sorry, but the file that you selected is too large. Please upload a file that is no larger than " + max_size + " KB.");
return false;
} // end if
} // end for loop
} // end function
document.getElementById('files').addEventListener('change', handleFileSelect, false);
}
</script>
<input type="file" name="image" id="files"/><br />
<input type="hidden" name="MAX_FILE_SIZE" value="5120" /></p>
<p><input type="submit" id="submit" value="Upload" />
</p>
<p> </p>
</form>
</body>
</html>
有什麼問題？當我從第一個下拉列表中選擇「Book」時，我可以看到第二個下拉列表。所以你的代碼是perfetly的工作 – FosterZ
你可以簡單地在DOM中附加事件：