1

I tried to populate a drop down based on another drop down with JavaScript, for example: I have 2 Select tags

<select name="Dept" size="1"
onchange="setOptions(document.myform.Dept.options[document.myform.Dept.selectedIndex].value);">

    <option value=" " selected="selected"> </option>
    <option value="1">Web Developers</option>
    <option value="2">Programmers</option>
    <option value="3">another one</option>
</select><br> <br>
    <select name="opttwo" size="1">
    <option value=" " selected="selected">Please select one of the Department above first</option>
</select>

so , when I choose a department (e.g, web developers) I'm getting data from a table (web) that contains students name.

I have the following code:

                    function setOptions(chosen) {
var selbox = document.myform.opttwo
var list2 = document.form1.students


selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the Department above first',' ');

}


if (chosen == "1") {
  selbox.options[selbox.options.length] = new
Option('<?php 

      include 'config.php';
  mysql_select_db("dept_db",$con);
  $result=mysql_query("SELECT * from web");
 while($row=mysql_fetch_array($result))

{  
   echo $row['web_student_name'] ;
}

 ?>');

}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('<?php 

      include 'config.php';
  mysql_select_db("dept_db",$con);
  $result=mysql_query("SELECT * from prog");
 while($row=mysql_fetch_array($result))

{  
   echo $row['prog_student_name'] ;
}

 ?>');

}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('<?php 

      include 'config.php';
  mysql_select_db("dept_db",$con);
  $result=mysql_query("SELECT * from another");
 while($row=mysql_fetch_array($result))

{  
   echo $row['another_student_name'] ;
}

 ?>');
}
}


        </script>

it's work correctly but when getting names from tables all names with each other (e.g, JosephStevePaul)

i want to show names each one separately 

(e.g 
Joseph
Steve
Paul
)
Improve this question
5
  • use explode() to explode the name and use them separately. Commented Jan 20, 2014 at 11:27
  • It seems that you have a combo box in form1 and another on myForm. Is this true? If yes, you'll have problem to send that data. Commented Jan 20, 2014 at 11:27
  • @Mrcoder can explain more ? i don't know about this function ! Commented Jan 20, 2014 at 11:33
  • @DontVoteMeDown Yes . i have problem but now i want to show names each one separately ! Commented Jan 20, 2014 at 11:34
  • @Joseph posted an answer,have a look Commented Jan 20, 2014 at 11:57

3 Answers 3

Reset to default
1

You have add each option within the php loop too:

<?php 
$result=mysql_query("SELECT * from prog");
while($row=mysql_fetch_array($result))
{  
    ?>
    selbox.options[selbox.options.length] = new Option('<?php echo $row['prog_student_name']; ?>');<?php
}
?>

Do this for the other loops too. Furthermore, add this code to the beggining of your code. You just need it once.

<?php
    include 'config.php';
    mysql_select_db("dept_db",$con);
?>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

that says : Uncaught SyntaxError: Unexpected token ILLEGAL
@Joseph this is a syntax error and I'm afrid it is on your code, because mine seems to be fine.
@Joseph nice. Glad to help!!
1

you can achieve this using ajax. You can populate the second dropdown list based on the items present in the first dropdown list. Code

<select name="Dept" size="1"
onchange="populatelist" id="dept">

    <option value="0" selected="selected"> </option>
    <option value="1">Web Developers</option>
    <option value="2">Programmers</option>
    <option value="3">another one</option>
</select>

When user selects one value ex:Web Developer send this value to the ajax page and query from the database all the student list which falls under this category.

function populatelist()
{
var qry=document.getelementbyid('dept').value;
var xmlhttp;
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)
        {

});
}
}
xmlhttp.open("POST", "pages/page.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("qry="+qry);
}

in page.php write query fetch the student list $value=$_POST['qry']; and write query there and populate a dropdown based on the result written by the query. and get the result and replace it with response from the ajax page as simple as that.

Improve this answer

1 Comment

@Joseph Take a look at this answer too. I would suggested that, but I was out of time to write such a code. +1
0

Assuming your prog_student_name is something like:

Joseph Steve Paul

what i am saying is:

Option('<?php 

      include 'config.php';
  mysql_select_db("dept_db",$con);
  $result=mysql_query("SELECT * from prog");
 $row=mysql_fetch_array($result);
 $stu=explode("",$row['prog_student_name']) ;
 for($i=0;$i<count($stu);$i++)
 {
  echo $stu[$i];
 }

 ?>');
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.