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

时间:2012-10-07 23:55:25

标签: php jquery drop-down-menu echo

我有一个上传表单,对于第一个下拉列表,类别下拉列表,如果选择选项值“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>';

        }

        ?>

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

$("#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>');

       });

答案 2 :(得分:0)

您可以使用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中创建了我的代码并且它的工作正常(我不知道正确的方法,但我希望我可以帮助你)