javascript - jquery显示/隐藏div下拉不起作用

Question

I want it so that when the category books is selected another drop down appears showing the book categories but this doesn't seem to be working:

<!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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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" />&nbsp;
        </p>

                <p>
                  <label><b>Description</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <textarea id="lname"  name="lname" cols="40" rows="5" maxlength="420"></textarea>&nbsp;
                </p>

          <p> <label for="conditional"><b>Condition </b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;
        </p>




<p><label><b>Contact</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;£</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();"/>&nbsp;
        </p>





      <p><label><b>Choose Image</b>&nbsp;</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>&nbsp;</p>
</form>


</body>
</html>

score 4 · Accepted Answer

你失踪了$(document).ready或$(function(){ })；

将您的 jquery 包装在其中。

$(document).ready(function(){
   $('#category').change(function() {
      if ($(this).val() == 'Books') {
          $('#p_bookcat').show();
      } else {
          $('#p_bookcat').hide();
      }
  });
});

编辑：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>

score 2 · Accepted Answer

把这个脚本

<script>
$('#category').change(function() {
    if ($(this).val() == 'Books') {
                    $('#p_bookcat').show();
            } else {
            $('#p_bookcat').hide();
            }
});

</script>

在您的页面末尾。当此脚本实际执行时，根本不存在#category，因此它不起作用。

javascript - jquery显示/隐藏div下拉不起作用

2 回答 2

Related

Reference