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

Question

我环顾四周，找到了一个适合我的解决方案，用来自第一个框的数据填充第二个下拉框。

我的第一个下拉菜单：

$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>

我的第二个下拉菜单：

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

我的 JS 代码：

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

以及获取第二个下拉菜单数据的代码：

$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);

一切正常。 当我按下提交按钮时，我得到了我需要的结果。但是 - 按下提交按钮后，第二个下拉列表中的数据将丢失。如果我想从第二个下拉菜单中选择另一个，我需要更改第一个下拉框，然后我需要将其更改回来，然后我可以在第二个框上进行新的选择...

抱歉 - 听起来有点糊涂...

我再解释一遍：

1. 1) 第一个下拉框 - 选择一个域（域 A）

   2）第二个下拉框 - 数据将被加载，我选择一个页面（页面 一）

   3) 按提交按钮

   4) 我得到了我的结果

   5) 我要选择另一个页面（页面 B）

   6) 第二个下拉框为空

   7) 第一个下拉框仍然充满了我的第一个决定（域 一）

   8) 我需要关闭域 B 并返回域 A 加载数据 再次为第二个下拉框。

有没有办法将第二个下拉框的数据存储在下拉框中？

我已经测试了几种填充数据的方法 - 但上面的代码（在 Stackoverflow 上找到）是唯一的，我开始工作了。

问候 托斯滕

Answer 1

您的数据丢失了，因为 POST 请求更新了您的文档。为防止丢失数据，您可以使用 ajax 进行提交。比如：

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

更多详情见http://api.jquery.com/jquery.post/

Answer 2

正如 Sergio 所提到的，您可以使用 jquery ajax 函数来提交表单，或者在提交后您可以在页面加载时检查它，如果 1st Drop down 的值 > 0 您会触发 My JS 代码。因此，将其全部包装在一件事中，它将如下所示：

$(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);
         }
        }
      });
   }
});