php - php jquery - 如果在第一个下拉列表中选择了一个值，如何显示另一个下拉选项

Question

我有一个上传表单，对于第一个下拉列表，类别下拉列表，如果选择了选项值“book”，我想回显另一个下拉列表（图书类别）

<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

添加第二个下拉列表，但在开头隐藏它：

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

然后添加以下 jQuery 代码：

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

Answer 2

$("#category").change(function() {

        $(this).parent().append('<div><select name="category1" id="category1">'
                        + '<option value="Law">Law</option> '
                        + '<option value="Business">Business</option>'
                        + '<option value=""> -- select -- </option></select></div>');

       });

Answer 3

您可以使用 onchange()

       <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" onchange="thefunction(this.value)">
                            <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>
        //<div id='catorsomething'></div> {the new dropdown will display in this div}

然后在你的 php 脚本/控制器/什么

            <?php
                  public function thefunction(){
            $w=$this->input->post('bookcat');  

             if ($w='Books'){
            echo ' <div id='catorsomething'>
            <p> <label for="bookcat"><b>Book Category</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>';
                            <select name="category" id="category">
                            <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></div>
            ';}
                } 
            ?>

然后在您的表单操作下方

<div id='catorsomething'></div>

我已经在 CodeIgnitel 中编写了这样的代码并且它可以工作（我不知道正确的方法，但我希望我能帮助你）