Php 基于两个下拉选择值在索引页中获取图像和其他详细信息？_Php_Javascript_Ajax

Php 基于两个下拉选择值在索引页中获取图像和其他详细信息？

php javascript ajax

Php 基于两个下拉选择值在索引页中获取图像和其他详细信息？,php,javascript,ajax,Php,Javascript,Ajax,我是php新手。我对下拉列表有问题。我有一个数据库，它包含两个表：firstCata和subCata。表subCata引用了firstCata ID。现在在我的index.php页面中，我有一个带有2个下拉列表的表单。第一个用于firstCata，第二个显示基于数据库中第一个的值。所有这些我都是使用Ajax完成的。问题是，使用ajax时，我在index.php中的标签上显示了第二个下拉列表。如何在index.php页面中显示子数据的其他详细信息 <head> <script t

我是php新手。我对下拉列表有问题。我有一个数据库，它包含两个表：firstCata和subCata。表subCata引用了firstCata ID。现在在我的index.php页面中，我有一个带有2个下拉列表的表单。第一个用于firstCata，第二个显示基于数据库中第一个的值。所有这些我都是使用Ajax完成的。问题是，使用ajax时，我在index.php中的标签上显示了第二个下拉列表。如何在index.php页面中显示子数据的其他详细信息

<head>
<script type="text/javascript">
function getSubCata(str)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getSunCata.php?q="+str.value,true);
xmlhttp.send();
}
</script>
</head>
<select onchange='getSubCata(this)'>
<?php 
$query=mysql_query("SELECT * FROM firstCata") or die(mysql_error());
while($rec=mysql_fetch_array($query))
{
?>
<option value="<?php echo $rec['firstCata_id'];?>"><?php echo $rec['firstCata_name'];?></option>
<?php } ?>
</select>


函数getsubdata（str）
{
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“结果”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“getSunCata.php？q=“+str.value，true”）；
xmlhttp.send（）；
}

我的getSunCata.php代码如下

<?php
mysql_connect('localhost','root','');
mysql_select_db('mainCata') or die(mysql_error());

?>
<select>
<?php
$id=$_GET['q'];
echo $id;
$query=mysql_query("SELECT * FROM subcata where firstCata_id=$id") or die(mysql_error());
while($rec=mysql_fetch_array($query))
{
echo $rec['subCata_name'];
?>
 <option id="a"value="echo $rec['subCata_id'];">
    <?php echo $rec['subCata_name']; ?>
</option>
    <?php
}
?>
</select>

如果我理解正确，您需要在第二次选择中打印所有子数据。那么，如果您希望同时显示所有子数据值，为什么需要ajax呢？以下是我的解决方案：

// MySQL query
$sql = '
    SELECT
        *
    FROM
        firstCata
    JOIN
        subCata
    ON
        firstCata_id = subCata_id';

使用jQuery模板html脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var selects_pair = $('select[name="firstCata"], select[name="subCata"]')
    selects_pair.change(function(){
        // get selected id
        var selected_id = $(':selected', this).val();
        // set another selectd corresponding value
        $('[value="' + selected_id + '"]', selects_pair.not(this)).attr("selected", "selected");
    });
});
</script>


$（函数（）{
var选择_pair=$（'select[name=“firstCata”]，select[name=“subCata”]）
选择_pair.change（函数（）{
//获取所选id
var selected_id=$（'：selected'，this.val（）；
//设置另一个选定的对应值
$（“[value=“”+selected_id+“]”，选择_pair.not（this））.attr（“selected”、“selected”）；
});
});

模板html标记

// looping through the data like this, add foreach cycle as you want

<select name="firstCata">
    <option value="<?php echo $rec['firstCata_id'];?>"><?php echo $rec['firstCata_name'];?></option>
</select>

<select name="subCata">
    <option value="<?php echo $rec['subCata_id'];?>"><?php echo $rec['subCata_name'];?></option>
</select>

//像这样循环遍历数据，根据需要添加foreach循环