php - phpjquery-最初のドロップダウンで値が選択された場合に別のドロップダウンオプションを表示する方法

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

2番目のドロップダウンリストを追加しますが、最初は非表示にします。

<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でこのようにコードを作成しましたが、それは機能します（正しい方法はわかりませんが、お役に立てれば幸いです）