Home/ Questions/Q 6470099
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:04:12+00:00

I want to have multiple drop box with around three on the page at

  • 0

I want to have multiple drop box with around three on the page at any one time.

When I select the first drop box it should display the content from a database in a table view. Then when I select the second drop box it should filter the data in the table and show the table and so on in the 3 box.

I know it can be done in Ajax so I little bit coding in php. I did the code but there is a problem that first box works properly but when I select the second box I need first box parameter along with second to be sent and so on to the third selection box.

Can please provide simple code for this from the database fetch for dynamic drop down box. I am trying this code for user comment review.

I have used this code
http://www.w3schools.com/PHP/php_ajax_database.asp

But in mine case everything comes from database and selected value should filter the 2 selecting box and also show the table. Then when selecting 3 selection box it show depend on the first two selected box.

I am trying as possible as I can to explain what I want. I think im clear what I just needed.

Looking for your support.
code is here 

<html>
<head>
<script type="text/javascript">
function showUserM(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}

function showUserI(str1,srt2)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("GET","getuser.php?q="+str1+"&i="+str2,true);
xmlhttp.send();
}
function showUserA(str1,str2,str3)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("GET","getuser.php?q="+str1+"&i="+str2+"&a="+str3,true);
xmlhttp.send();
}


</script>
</head>
<body>
<?php 
 $server = 'localhost';
$user = 'root';
$pass = '';
$dbase = 'pub_12wing';

$connect = mysql_connect($server, $user, $pass, $dbase);

mysql_select_db("publisher",$connect);

/* some mistake is there here to,In fetching data according to the $sql_issue should depend on $sql_magz selected query and so for the last selection box
what needed to be change */

   $sql_magz = "select Distinct magz_id from magz_comment where pub_id = '2'";
    $sql_issue = "select Distinct issue_id from magz_comment where pub_id = '2'";
    $sql_artical = "select Distinct artical_id from magz_comment where pub_id = '2'";
    $result_magz = mysql_query($sql_magz);
    $result_issue = mysql_query($sql_issue);
    $result_artical = mysql_query($sql_artical);
    ?>
    <form>

<select name="mag_id" onChange="showUserM(document.getElementByID('mag_id').value)" id="mag_id">

<option value="" selected>Select a Magazine ID:</option>
<?php 
while ($row =mysql_fetch_array($result_magz)){
echo "<option value=".$row['magz_id'].">{$row['magz_id']}</option>";
}
?>
</select>



<select name="issue_id" onchange="showUserI(document.getElementByID('mag_id').value,document.getElementByID('issue_id').value)" id="issue_id">
<option value="" selected>Select a Issue ID:</option>
<?php 
while ($row =mysql_fetch_array($result_issue)){
echo "<option value=".$row['issue_id'].">{$row['issue_id']}</option>";
}
?>
</select>



<select name="artical_id" onchange="showUserA(document.getElementByID('mag_id').value,document.getElementByID('issue_id').value,document.getElementByID('artical_id').value)" id="artical_id">
<option value="" selected>Select a Artical ID:</option>
<?php 
while ($row =mysql_fetch_array($result_artical)){
echo "<option value=".$row['artical_id'].">{$row['artical_id']}</option>";
}
?>
</select>


</form> 
<br />
<div id="txtHint"><b>Magazine info will be listed here.</b></div>
<?php //mysql_close();?>
</body>
</html>

Does this document.getElementByID(‘mag_id’).value or not what needed to be changed.

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The first combo box have fixed values ?
    If it does, you generate it normal in the document:

    <select id="mag_id" onchange='PopulatesSecundBox(this)'>
<?php // prints database's data ?>
</select>

    Then if the secund and the third combos are dinamically, you may do this:

    <select id="issue_id" onchange='PopulatesThirdBox(this)'>
<!-- Yes, it's empty -->
</select>

<select id="artical_id">
<!-- Yes, it's empty too -->
</select>

    Then you handle db data in the events with ajax and uses DOM to make the magic with the options… It’s some like that you need ?

    • 0