Home/ Questions/Q 7545623
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T08:58:42+00:00

I have two dropdowns and I want the second dropdown to get populated on

  • 0

I have two dropdowns and I want the second dropdown to get populated on the basis of the data selected from the 1st dropdown

Here is my 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>

And this is 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>

now for the javascript ajax file,(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();
}

For more better assistance, the database table contains two fields, religion and caste, where the first attribute is religion, and caste being the second.

If somehow I can catch the string str, then it could have solved the matter.

document.getElementById("view").InnerHTML=xmlhttp.responseText provides the string “str1″,”str2”,… to be viewed in <div id="view">

But if I write the following code:

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

Then a msgbox pops up with such view:

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




"Catholic","Protestant"

If I could just get the string, I would be happy.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So in your place a would do a little remake in getcaste.php first – place all results from your query into an array and then use implode to get a string using delimiter – ;. (Optionaly you could use a json and decode it in js). In religion_caste.js use split to get an array back from it (; as delimiter);
    Now use for cycle to cycle through all values, and every cycle add one option into select

    example: 

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

    Edit:

    so json in php is easy – json_encode
    json in js is a little bit more difficult. New browsers should support JSON.parse, for old ones you have to use this code(Not 100% sure here since I always use jQuery). Alternatively you could use jQuery and jQuery.parseJSON

    • 0