Select Box that depends on another select box

chris17 · February 26, 2014

Hi Pals.

I have a select option named doctor that i need to depend on the another select option named field, just like in Months and days where February shows 29 days in the days select option when clicked.

The only difference here is that my data source is from mysql database instead of just html.

jairathnem · February 26, 2014

you will have to use javascript or jquery to acheive that.

chris17 · February 27, 2014

Ok thanks but how can i do that Sir.

This is the little of tried doing:

<?php include("includes/database.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NHIS - Book Appointment</title>
<link rel="stylesheet" type="text/css" href="styles/lay_comp.css">
<script type="text/javascript" src="script.js"></script>
</head>


<body>
<div id = "container">

  <div id = "header"><a href="">Back to Home</a></div>

<div id = "title"><h3>BOOK APPOINTMENT</h3></div>


<div id = "content">
<div id = "form_cont">

<form id="form1" name="form1" method="post" action="">
  <fieldset>
    <fieldset class="f1">

    
    <label for="field"><span>Category:</span>
    <select name="field">
<?php
    $fields = mysql_query("SELECT * FROM field",$connection);

if(!$fields){ die("Error1: " . mysql_error()); }
	
	while($row = mysql_fetch_array($fields)){
			echo "<option value=\"{$row["field_id"]}\" > {$row["field"]} </option>";
	}
?>

    </select>
    </label>
<?php
    $fields = mysql_query("SELECT * FROM field",$connection);

if(!$fields){ die("Error1: " . mysql_error()); }
	$row = mysql_fetch_array($fields);

$tips = mysql_query("SELECT * FROM doctor WHERE field_field_id =  {$row["field_id"]}", $connection);

	if(!$tips){
	die("Error2: " . mysql_error());
	
	}
	$row2 = mysql_fetch_array($tips); 

?>
    <label for="doctor"><span>Doctor:</span>
    <select name="doctor">

<script type="text/javascript">
window.onload = InitFrm;

function InitFrm(){
	document.getElementById("field").selectedIndex = 0;
	document.getElementById("field").onchange = populateDoc;
	}

function populateDoc(){
	<?php 
"<option value=\"{$row2["doc_id"]}\" > {$row2["Fname"]} </option>";	?>
	}
</script>

   </select>
    </label>
    

    <label for="topic"><span>Topic:</span>
    <input type="text" name="topic" id="topic"/>
    </label>
    

   </fieldset>
  <div id="comps">
	  <label for="complaint"><span>Summary of Complaints:</span>
	  <textarea rows="20" cols="40" name="complaint" id="complaint"></textarea>
	  </label>

      </div>    
	  </fieldset>
		<div>
		<input id="buttondiv" type="submit" name="submit" value="BOOK"/>
		</div>
  </form>
</div>

</div>

</body>

</html>

Please help me.

Thanks

chris17 · February 27, 2014

Ok thanks but how can i do that Sir.

This is the little of tried doing:

<?php include("includes/database.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NHIS - Book Appointment</title>
<link rel="stylesheet" type="text/css" href="styles/lay_comp.css">
<script type="text/javascript" src="script.js"></script>
</head>


<body>
<div id = "container">

  <div id = "header"><a href="">Back to Home</a></div>

<div id = "title"><h3>BOOK APPOINTMENT</h3></div>


<div id = "content">
<div id = "form_cont">

<form id="form1" name="form1" method="post" action="">
  <fieldset>
    <fieldset class="f1">

    
    <label for="field"><span>Category:</span>
    <select name="field">
<?php
    $fields = mysql_query("SELECT * FROM field",$connection);

if(!$fields){ die("Error1: " . mysql_error()); }
	
	while($row = mysql_fetch_array($fields)){
			echo "<option value=\"{$row["field_id"]}\" > {$row["field"]} </option>";
	}
?>

    </select>
    </label>
<?php
    $fields = mysql_query("SELECT * FROM field",$connection);

if(!$fields){ die("Error1: " . mysql_error()); }
	$row = mysql_fetch_array($fields);

$tips = mysql_query("SELECT * FROM doctor WHERE field_field_id =  {$row["field_id"]}", $connection);

	if(!$tips){
	die("Error2: " . mysql_error());
	
	}
	$row2 = mysql_fetch_array($tips); 

?>
    <label for="doctor"><span>Doctor:</span>
    <select name="doctor">

<script type="text/javascript">
window.onload = InitFrm;

function InitFrm(){
	document.getElementById("field").selectedIndex = 0;
	document.getElementById("field").onchange = populateDoc;
	}

function populateDoc(){
	<?php 
"<option value=\"{$row2["doc_id"]}\" > {$row2["Fname"]} </option>";	?>
	}
</script>

   </select>
    </label>
    

    <label for="topic"><span>Topic:</span>
    <input type="text" name="topic" id="topic"/>
    </label>
    

   </fieldset>
  <div id="comps">
	  <label for="complaint"><span>Summary of Complaints:</span>
	  <textarea rows="20" cols="40" name="complaint" id="complaint"></textarea>
	  </label>

      </div>    
	  </fieldset>
		<div>
		<input id="buttondiv" type="submit" name="submit" value="BOOK"/>
		</div>
  </form>
</div>

</div>

</body>

</html>

Please help me.

Thanks

WebStyles · February 27, 2014

you will have to use javascript or jquery to acheive that.

there's no javascript in your code. Try google something like "javascript get <select> value"

EDIT: opsss... Sorry, just saw the javascript code mixed in at the end. Hang on, I'll have a look for you.

Edited February 27, 2014 by WebStyles

WebStyles · February 27, 2014

Ok, the select box that you can change (field), you need to add an onChange="" tag that will call your javascript function every time you change the value.

so, something like this: (imagine the javascript function is called updateValues

<select name="field" onchange="updateValues()">

this is a basic example, your javascript function would be something like this: (assuming the value of one is the index of the other)

function updateValues(){
  // get the value that's selected
 var a = document.getElementById("field");
 var b = a.options[a.selectedIndex].value;
 // make other box change
  document.getElementById("doctor").selectedIndex = b;
}

Edited February 27, 2014 by WebStyles

chris17 · February 27, 2014

If you look closely at my code, you ll see that there is a php embedded in the code that i need to retrieve values from my database. How will i come about this. The fields' and the doctors' table are different but related. Thanks a lot.

WebStyles · February 27, 2014

here's a simple working example of how one box can change the other. You should be able to adapt it to your case:

<html>
<head><script>
function updateValues(a){
   // get the value that's selected
   var b = a.options[a.selectedIndex].value;
   // set the value on next box
   var doctor = document.getElementById('doctor');
   var cnt = doctor.length;
   for (var i=0; i < cnt; i++){
      if (doctor.options[i].value == b){
         doctor.options[i].selected = true;
      }
   }
}
</script>
</head>
<body>
<select id="field" name="field" onchange="updateValues(this)">
   <option value="0">please select one</option>
   <option value="1">One</option>
   <option value="2">Two</option>
</select>

<br><br><br>

<select id="doctor">
   <option value="0">nothing selected</option>
   <option value="1">Doctor One Selected</option>
   <option value="2">Doctor Two Selected</option>
</select>


</body>
</html>

Hope that helps

Edited February 27, 2014 by WebStyles

Sign In

Select Box that depends on another select box

Recommended Posts

chris17

Link to comment

Share on other sites

jairathnem

Link to comment

Share on other sites

chris17

Link to comment

Share on other sites

chris17

Link to comment

Share on other sites

WebStyles

Link to comment

Share on other sites

WebStyles

Link to comment

Share on other sites

chris17

Link to comment

Share on other sites

WebStyles

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information