2个下拉列表在php中依赖于彼此。 需要仅重新加载包含文件而不是整个页面

2个下拉列表在php中依赖于彼此。 需要仅重新加载包含文件而不是整个页面

问题描述:

I have 2 simple drop down lists one dependent on the other in a php include.

When one is selected it refreshes the page and then populates the second with the correct data, (works great).

The problem is that it refreshes the whole page instead of just the include file.

Is there a way to do just refresh the include? I have looked at many other examples (Ajax, Javascript etc) on here and other sites and cannot seem to get it to work.

A huge thank you in advance to anyone who can point me in the right direction.

<form enctype="multipart/form-data" action="advanced_search2.php" method="POST">

<?php require 'config.php'; ?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<?
echo '<div id="publication">';

echo "<select name='cat'><option value=''>Select one</option>";
$quer2="SELECT DISTINCT id,publication FROM publication WHERE appear = 'Yes' and Search = 'Yes'"; 
foreach ($dbo->query($quer2) as $noticia2) {
echo "<option selected value='$noticia2[publication]'>$noticia2[publication]</option>"." <BR>";
}
echo "</select>";

echo '</div>';
?>


<?
echo '<div id="section">';

echo "<select name='subcat'><option value=''>Select one</option>";

$quer="SELECT DISTINCT section FROM sandbox WHERE publication = '$cat' AND appear = 'Yes'";

foreach ($dbo->query($quer) as $noticia) {
echo  "<option value='$noticia[section]'>$noticia[section]</option>";
}
echo "</select>";

echo '</div>';

?>

<form>

 <script>
 $('#publication').change(function(){
   var page = $( this ).attr('data-page');
    $.ajax({
    type:'POST',
    url:page,
    success: function(response){
        $('#section').html(response);
    }
  });
})
</script>

  1. wrap your second select box with a div
  2. in you js function 'reload', call a ajax (another page) where you pass the catid and echo your second select box in that page
  3. update your div html with the ajax response.

Your main page can look like this

  <?php require 'config.php'; ?>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <?
    echo '<div id="publication">';

    echo "<select name='cat'><option value=''>Select one</option>";
    $quer2="SELECT DISTINCT id,publication FROM publication WHERE appear = 'Yes' and Search = 'Yes'"; 
    foreach ($dbo->query($quer2) as $noticia2) {
    echo "<option selected value='$noticia2[publication]'>$noticia2[publication]</option>"." <BR>";
    }
    echo "</select>";

    echo '</div>';
    ?>
    <div id="section"></div>
<script>
 $('#publication').change(function(){
$('#section').load('subcat.php?cat='+$(this).val());

  });
})
</script>

And another page for getting subcat (subcat.php)

    <?php
       require 'config.php';
$cat = $_GET['cat'];

    echo "<select name='subcat'><option value=''>Select one</option>";

    $quer="SELECT DISTINCT section FROM sandbox WHERE publication = '$cat' AND appear = 'Yes'";

    foreach ($dbo->query($quer) as $noticia) {
    echo  "<option value='$noticia[section]'>$noticia[section]</option>";
    }
    echo "</select>";



?>