使用PHP，mySQL和JS填充下拉框时出现问题

Question

I look around a long time and found a solution that works for me, to populate a 2nd drop down box with data based from the 1st box.

My first drop down:

$select   = $dbh->query("SELECT DISTINCT `pageid`, `name` FROM `site` ORDER BY `pageid` ASC");
$contents = $select->fetchAll(PDO::FETCH_OBJ);
foreach($contents as $content) {
< option value="< ?=$content->pageid;?>">< ?=$content->name;?>< /option>
}
< /select>
< script type="text/javascript">document.getElementById('site').value = "< ?=$_POST['site'];?>";< /script>

My second drop down:

< select id="page" name="page" class="form-control">< /select>
< script type="text/javascript">document.getElementById('page').value = "< ?=$_POST['page'];?>";</script>

My JS code:

$("#site").change(function() {
  $.ajax({
    url : "get_page.php?id=" + $(this).val(),
    type: 'GET',
    dataType:'json',
    success : function(data) {
      if (data.success) {
        $('#page').html(data.options);
      }
    }
  });
});

And the code to get the data for the 2nd drop down:

$id = $_GET['id'];
if (!isset($id) || !is_numeric($id))
  $reponse = array('success' => FALSE);
else {
  $query = $dbh->prepare("SELECT `pageid`, `page`, `pagename` FROM `site` WHERE `pageid` = :id ORDER BY `pagename` ASC");
  $query->execute(array(':id' => $id));
  $rows = $query->fetchAll(PDO::FETCH_ASSOC);
  $options = "";
  foreach ($rows as $row) {
    $options .= '< option value="'. $row[page] .'">'. $row[pagename] .'< /option>';
  }
  $response = array( 'success' => TRUE, 'options' => $options );
}
header('Content-Type: application/json');
echo json_encode($response);

Everything works fine. When I press the submit button, I get the results I need. BUT - the data from the 2nd drop down will be lost after pressing the submit button. If I want to another selection from the 2nd drop down, I need to change the 1st drop box, then I need to change it back and then I can make a new selection on the 2nd box ...

Sorry - sounds a little bit confused ...

I try to explain again:

1. 1) 1st Drop down Box - choose a Domain (Domain A)

   2) 2nd Drop down Box - data will be loaded and I choose a page (Page A)

   3) Press submit button

   4) I get my results

   5) I want to choose anothe Page (Page B)

   6) 2nd Drop down Box is empty

   7) 1st Drop down Box is still filled with my first decision (Domain A)

   8) I need to coose Domain B and go back to Domain A to load the data for 2nd Drop down box again.

Is there a way that the data from the 2nd Drop down Box will be stored in the Drop down Box?

I test already a few ways to populate data - but this code above (found here on Stackoverflow) is the only one, I get to work.

Regards Torsten

Answer 1

Your data is lost, because POST request updates your document. To prevent losing data, you can use ajax for submit. Something like:

$("button").on("click", function(){
    $.post(url, data);
});

For more details see http://api.jquery.com/jquery.post/

Answer 2

As mentioned by Sergio, you can use jquery ajax function for submitting the form OR after submission you can just check it out on page load that if 1st Drop down is having value > 0 you fire your My JS code. So wrapping it all under one thing, it will go as:

$(document).ready(function(){
   var drpDwn1 = $('#site').val();
   if (drpDwn1 > 0) {
       // fire ajax function
       $.ajax({
       url : "get_page.php?id=" + $(this).val(),
       type: 'GET',
       dataType:'json',
       success : function(data) {
         if (data.success) {
          $('#page').html(data.options);
         }
        }
      });
   }
});