Question

我有两个下拉菜单，我想根据从第一个下拉列表中选择的数据填充第二个下拉列表

这是我的main.php：

<?php
 include('connection.php');
 $query_religion="SELECT DISTINCT religion FROM religion_caste_table";
 $result_religion = mysql_query($query_religion, $con);
 ?>

<html>
<body>
    <select name="religion" id="religion" style="width: 100px" onChange="showcaste(this.value)">
                              <?php
                              while($q_rel_data = mysql_fetch_array($result_religion))
                               {?>
                                <option value="<?php echo $q_rel_data[0]; ?>">
                                <?php echo $q_rel_data[0]; ?>
                                </option>
                                <?php }?>
                           </select>
    <div id="view"></div>
    <select name="caste" id="caste" style="width: 100px"></select>
</body>
</html>

这是getcaste.php：

<?php 
include('connection.php');
$string=$_GET["religion"];

$sql="SELECT caste FROM religion_caste_table WHERE religion = '".$string."'";
$result = mysql_query($sql,$con);
$myarray=array();
$str="";
while($result_caste=mysql_fetch_array($result))
{
$str=$str . "\"$result_caste[caste]\"".",";
}
$str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string
echo $str;/*Stop hiding from IE Mac */

//echo $string;
mysql_close($con);
?>  
<html>
</html>

现在为javascript ajax文件，（religion_caste.js）

function showcaste(string)
{
if (string=="")
  {
  document.getElementById("caste").innerHTML="";
  return;
  }

alert(string);
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("view").innerHTML=xmlhttp.responseText;
         //now how to catch the string from (getcaste.php), split it and save it into array
          // and to populate the second dropdwn by the array;

    }
  }
xmlhttp.open("GET","getcaste.php?religion="+string,true);
xmlhttp.send();
}

为了获得更好的帮助，数据库表包含两个字段：宗教和种姓，第一个属性是宗教，种姓是第二个。

如果我能以某种方式捕获字符串str，那么它本可以解决问题。

document.getElementById("view").InnerHTML=xmlhttp.responseText提供字符串“str1”，“str2”，...以便在<div id="view">中查看

但如果我写下面的代码：

var string=(document.getElementById("view").InnerHTML);
alert(string);

然后一个msgbox弹出这样的视图：

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>




"Catholic","Protestant"

如果我能得到字符串，我会很高兴。

Answer 1

所以在你的位置首先在getcaste.php中做一些重制 - 将查询中的所有结果放入一个数组中，然后使用implode使用分隔符 - ;来获取字符串。（Optionaly你可以使用json并在js中解码它）。在religion_caste.js中使用split从中获取一个数组（;作为分隔符）; 现在使用循环遍历所有值，每个循环在select

中添加一个选项

示例：

var select = document.getElementById("caste");
for (var key in values)
{
    var OptNew = document.createElement('option');
    OptNew.text = values[key];
    OptNew.value = key;
    try 
    {
        select.add(OptNew, null); // doesn't work in IE
    }
    catch(ex) 
    {
        select.add(OptNew); // IE only
    }
}

编辑：

所以php中的json很简单 - json_encode js中的json有点困难。新的浏览器应该支持JSON.parse，对于旧的浏览器，你必须使用这个code（因为我总是使用jQuery，所以不是100％肯定）。或者，您可以使用jQuery和jQuery.parseJSON

使用ajax填充两个下拉列表

1 个答案: