Question

I have an upload form, for the first drop down, the category drop down, I want to echo another drop down list (book category) if the option value “book” is chosen

<form action="uploadproc1.php" method="post" enctype="multipart/form-data">

                     <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>

        <?php IF (category selected==book?){
           echo '<p> <label for="bookcat"><b>Book Category</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>';
                echo '<select name="category" id="category">';
                echo '<option value=""> -- select -- </option>';
                   echo '<option value="Law">Law</option>';
                   echo '<option value="Business">Business</option>';
                    echo '<option value="Optom">Optom</option>';
                    echo '<option value="Engineering">Engineering</option>';
                    echo '<option value="Pharmacy">Pharmacy</option>';
                    echo '<option value="Sciences">Sciences</option>';
                    echo '<option value="Languages">Languages</option>';
                    echo '<option value="English">English</option>';
                    echo '<option value="Maths">Maths</option>';
                    echo '<option value="Other">Other</option>';


                   echo '</select>';
        echo '</p>';

        }

        ?>

Answer 1

Add the second dropdown list, but hide it at the beginning:

<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>

Then add the following jQuery code:

<script type="text/javascript">
  $(document).ready(function () {
    $('#category').change(function() {
      if ($(this).val() == 'Books') {
        $('#p_bookcat').show();
      } else {
        $('#p_bookcat').hide();
      }
    });
  });
</script>