Question

I have two chained select boxes where the second drop down populates based on the value of the first drop down and that works well. I currently have a php function that retrieves and displays the values of the selectboxes when users click on a button. Now the challenge I have is because they have to click the button to display the options they selected, the page is refreshed but I want a way where the options selected can be retrieved and displayed so the users can see what they choose without the page refreshing. I know this can be achieved using ajax but I am new to ajax and I have checked so many similar problems online but I do not quite understand how to make this work. Any advise on this will be very much appreciated. Please see below my php function that performs the retrieve and display of the selected values

function OutputCategory() {
    if (isset($_POST['drop_2']) && ($_POST['btn_confirm']) && ($_POST['drop_1'])) {
        $drop2 = $_POST['drop_2'];
        $drop1 = $_POST['drop_1'];

        $cat_name = mysql_query(sprintf("SELECT subcategory_name FROM subcategory WHERE subcategory_id = '%s'", mysql_real_escape_string($drop2)));
        while ($cat_name1 = mysql_fetch_array($cat_name)) {
            $cat_name2 = $cat_name1['subcategory_name'];
        }

        $cat = mysql_query(sprintf("SELECT category_name FROM category WHERE category_id = '%s'", mysql_real_escape_string($drop1)));
        while ($cat1 = mysql_fetch_array($cat)) {
            $cat_2 = $cat1['category_name'];
        }
        echo "You selected Category:";
        echo $cat_2." >> ".$cat_name2;
    }
    elseif(isset($_POST['drop_1']) && ($_POST['btn_confirm'])) {
        $drop1 = $_POST['drop_1'];
        $cat = mysql_query(sprintf("SELECT category_name FROM category WHERE category_id = '%s'", mysql_real_escape_string($drop1)));
        while ($cat1 = mysql_fetch_array($cat)) {
            $cat_2 = $cat1['category_name'];

            echo "You selected Category:";
            echo $cat_2;
        }
    }
}​

Answer 1

You need to bind an ajax call to the select, something like this:

$('#select1_id').on('change', function() {
  $.ajax({
    type: 'GET',
    data: {
      'select1_val': $(this).val()
    },
    url: 'some_page.php',
    success: function( data ) {
      $select2 = $('#select2_id');
      $select2.empty();      

      $(data.options).each(function(i,option){
        // append option to $select2
      });
    } 

  });
});

Then, on “some_page.php”, hae something like this:

if( $_GET['select1_val'] ) {

  // get the select 2 vals, put them into an $array
  json_encode(array('options' => $array )); exit;

}

… although this is of course a very simple example, I’m sure you get the idea

Cheers,