0

データベースから入力された 2 つのドロップダウンリストを作成しました。最初のドロップは国で、2 番目のドロップは都市です。ユーザーが 2 番目のドロップダウンで国を自動的に選択すると、その国のすべての都市が表示されます。問題は、別の国を選択するとすべてのページが更新され、その 2 つのドロップダウン リストだけを更新したいことです。Javascript と PHP を使用しています。コードは次のとおりです。

@$cat=$_GET['cat']; 




$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category"); 

if(isset($cat) and strlen($cat) > 0){
$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory where cat_id=$cat order by subcategory"); 
}else{$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory order by subcategory"); } 




echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
while($noticia2 = mysql_fetch_array($quer2)) { 
if($noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[category]'>$noticia2[category]</option>"."<BR>";}
else{echo  "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";}
}
echo "</select>";
echo "&nbsp&nbsp";
echo "<select name='subcat'><option value=''></option>";
while($noticia = mysql_fetch_array($quer)) { 
echo  "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>";
}
echo "</select>";

これはJavascriptコードです：

function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='index.php?cat=' + val ;
}

国を変更したときに、すべてのページがそれらの 2 つのドロップダウン リストだけを更新しないようにします。どんな助けでも大歓迎です。

4

4 に答える 4

3

これを達成するために使用できますAjax。

Pls はこのリンクを確認してください

U が jquery を使用している場合は.ajax(). jquery ajax select list populate の例は、Jquery Ajax Select List Populateです。

于 2012-10-04T08:45:46.493 に答える
2

ajax を使用する必要があります。非常に初歩的な提案は次のとおりです。

//self.location = '...' - removed
ajax('index.php?cat=' + val).done(function (result) {
   //update select boxes
});
于 2012-10-04T08:45:30.223 に答える
1

これを試して

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function()
 {
 $(".Select1").change(function()
 {
var id=$(this).val();
var dataString = 'your_param='+ your_param;
$.ajax
({
    type: "POST",
    url: "select_2.php",
    data: dataString,
     cache: false,
     success: function(html)
    {
   $(".Select2").html(html);
   } 
   });

    });
  });
    </script>

     <title>Untitled Document</title>
   </head>

   <body>
  <?php
  include("config.php");
  $sql="SELECT * FROM your_table";
  $result2 = mysql_query($sql);
     ?> 
  <select class="Select1">
  <option value=""></option>
     <?php  
  while($row2 = mysql_fetch_array($result2))
  {
    ?>
  <option value="<?php echo $row2['your_value']?>"><?php echo $row2['your_value']?>    </option>

     <?php  
  }             
  ?>
  </select><br />
  <select class="Select2"></select>
 </body>
</html>

そしてselect_2.phpで

<?php
 include('config.php');
 if($_POST['your_param'])
  {
     $your_param=$_POST['your_param'];
    $sql = mysql_query("SELECT * FROM  yortable WHERE param = '".$your_param."'") or die(mysql_error());

 while($row=mysql_fetch_array($sql))
{
 $your_value=$row['your_param'];
 echo '<option></option>';
  echo '<option value="'.$your_value.'">'.$your_value.'</option>';

   }
    }

     ?>
于 2012-10-04T10:48:52.303 に答える
0

ページの一部を更新するには、AJAX を使用する必要があります。AJAX を使用する最も簡単な方法は、JQuery を使用することです。AJAX の API は次のとおりです。

于 2012-10-04T11:05:26.523 に答える