How to fill one combo box basing other combo box selected value

Question

I have created two tables "category" and "subcategory". So what i need to do is that i have organized two combobox and one will retrieve values from category table and populate the data. However, i need to fill the other combobox when one selected from the category combobox and populate all the values from subcategory table.

I really thank you all for helping me out.

Looking for great answer.

Thank you in advance.

Please search for cascading select - this is a Very FAQ - for example http://stackoverflow.com/questions/25086786/cascading-dropdown-jquery-ajax-php — mplungjan, Apr 13 '15 at 12:10

Tim Strawbridge · Accepted Answer · 2015-04-13T13:22:06.367

You will probably want to use AJAX and php to do this....

First, if you don't have a jquery library, you can get it at http://jquery.com/download/ This will enable you to use AJAX jquery.

In your html header:

    <script>

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

            var selectVal = $('#category :selected').text();


            $.ajax({                                      
              url: 'getsubcat.php',                         
              data: "groupid="+selectVal,                                                     
              type:'post',
              //dataType: 'json',                
              success: function(data)    
              { 
                $('#subcat').html('<option value="">'+data+'</option>');
              }
            });


        });

      });

    </script>

In the html body --

<?php
    include('conn.php');    
        $sql = "SELECT * FROM categories";
        $result3 = pg_query($con, $sql);
      ?>


<!-- first select list -->

Select a category: </td><td>
        <select id="category" name="category">
          <option value = ""></option>
        <?php
          while($row = pg_fetch_array($result3)) {
            echo '<option >'.$row[1].'</option>';
          }
        ?> 
        </select>



<?php

        $sql = "SELECT * FROM subcategories where cat = '$cat'";
        $result3 = pg_query($con, $sql);

      ?>

      Select a sub category: 
      <select id="subcat" name="subcat">
        <option value = ""></option>
        <?php
          while($row = pg_fetch_array($result3)) {
            echo '<option>'.$row[1].'</option>';
        }
      ?>


      </select>

Finally, in your php file -- getsubcat.php

<?php
    $category = $_POST['groupid'];



  include('conn.php');
  $sql="select * from subcat where cat_name = '$category'";
  $result = pg_query($con, $sql);

  while($row = pg_fetch_array($result)) { 

    echo '<option>'.$row[1].'</option>';


  }
  pg_query($sql) or die("Error: ".pg_last_error());
?>

All of this will allow you to have your select lists dynamic an dependent on the first one.

Here I am using postgresql for the database, but you should be able to change the connection string (conn.php) and the table names, columns if you are using a different database like mysql.

Thank you it works fine. But, i'm needing something further assistance. As per your suggestion i have successfully list all possible category and subcategory from the database and while some value selected from the category it changes the subcategory fine. But, i need search button integrated with it. Is there any possible way i can do that. Like if i'm going to select the category from category combo box and subcategory from the other combo box and when i clicked search button it shows me the result fetched from the database. How to grap values of such kind. Thank you! — Fekade, Apr 22 '15 at 02:17

How to fill one combo box basing other combo box selected value

1 Answers1