Question : Select pulldown box B based on selection made in pulldown box A or data from database using  php and javascript

I have a select box call Application with three options:
   Need to Know Guides
   Buying Guides
   Local Page Articles

When the page first loads, the database is queried and the value of applications is gotton

If  the value = Buying Guides  then I want to display a select box call Topics.

If the value is Local Page Articles  then I want to display a select box call Coverage Area.

Then if the user changes the selection in the Applciations box, I want to change which second box is displayed:

If  Buying Guides is selected then I want to display a select box call Topics.

If Local Page Articles is selected then I want to display a select box call Coverage Area.

The code I have below has it working for the user side selection by placing the boxes in divs and setting the visibility of the div with javascript.

  My problem is I cannot figure out how to display the second box based on the initial application value recieved from the database.   
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:

<?php

require_once("cmscommon.inc");


?>
<html>
<head>
<title>CMS Article Entry/Edit</title>
<STYLE TYPE="text/css">
	.headw  { font: BOLD 14pt arial, helvetica, sans-serif; }
	.headw { color: #336600; }
	.headk  { font: BOLD 11pt arial, helvetica, sans-serif; }
	.headk { color: #336600; }
	.smallk { font: 10pt arial, helvetica, sans-serif; }
	.smallgk { font: 10pt arial, helvetica, sans-serif; }
	.smallgk { color: #336600; }
	.tinyk  { font: 8pt arial, helvetica, sans-serif; }


    </style>
<script language="javascript1.2">


var disStyle=0
var dom=document.getElementById||document.all

function getItem(id) {
return document.getElementById&&document.getElementById(id)? document.getElementById(id) : document.all&&document.all[id]? document.all[id] : null;
}

if(dom)
document.write('<style type="text/css" id="dummy">\
.tlink{\
display:none;\
}\
<\/style>')

if(dom&&typeof getItem('dummy').disabled=='boolean'){
document.write('<style type="text/css" id="showhide">\
.showhide{\
display:none;\
}\
#cdiv0 {\
display:block;\
}\
<\/style>');
disStyle=1;
}

function displayOne(idPrefix, idNum){
var i=0;
while (getItem(idPrefix+i)!==null){
getItem(idPrefix+i).style.display='none';
i++;
}
if (typeof idNum!=='undefined')
getItem(idPrefix+idNum).style.display='';
}


onload=function(){
displayOne('cdiv', 0);
if (disStyle)
getItem('showhide').disabled=true;
}


</script>
</head>
<?php

	  
	  $sql = "SELECT * FROM cmsmain WHERE cmsid = 100606";
	  $result = db_query($sql, $db);        
      $myrow = mysql_fetch_array($result);
	  $coveragearea=$myrow["coveragearea"];
	  $application=$myrow["application"];
	  $topicid = $myrow["topicid"];


		$sql = "SELECT * FROM cmstopic";
		$topicresult = db_query($sql, $db);

  ?> 

<body link="#336600" alink="#669966" vlink="#669966" >



<form name="addarticle" method="post" action="2.3EditorUpdateDatabase.php">
   <input type="hidden" name="apptype" value="">

<input type="hidden" name="cmsid" value="<?php echo $cmsid?>">


  <table width="100%" cellpadding="0" cellspacing="4" border="0" bgcolor="#FFFFFF">
	<tr>
	<td align="left" width="20%" class="smallgk"><b>Application:</b></td>
	<td width="30%" align="left"><select  name="application" onChange="displayOne('cdiv', this.selectedIndex);">
          <option  <?php if($application == ""){?> selected <?php } ?>value="">Please Select</option>
          <option <?php if($application == "Need To Know Guides"){?> selected <?php } ?>value="Need to Know Guides">Need To Know Guides</option>
          <option <?php if($application == "Buying Guides"){?> selected <?php } ?>value="Buying Guides">Buying Guides</option>
		  <option <?php if($application == "Local Page Articles"){?> selected <?php } ?>value="Local Page Articles">Local Page Articles</option>
        </select></td>
	
		
<td width="49%" align="left" class="smallgk"><b>
	<div id="apptype">
	  <div class="showhide" id="cdiv0" name="cdiv0">&nbsp;</div>
		  <div class="showhide" id="cdiv1" name="cdiv1">&nbsp;</div>
	  <div  class="showhide" id="cdiv2" name="cdiv2">Topic:&nbsp;&nbsp;&nbsp;&nbsp;
	  <select  name="topic">
	  <option value="" selected>- Select -</option>
	  <?php
	     while ($mytopic = mysql_fetch_array($topicresult))
			{
			?>
			<option value="<?php echo $mytopic["topicid"]; ?>"	<?php if($topicid == $myrow["topicid"]){?>selected<?php } ?>><?php echo $mytopic["topicname"] ?></option>
			<?php
			}
			?>
		</select>
			  </div>
	  <div class="showhide" id="cdiv3" name="cdiv3">Coverage Area:&nbsp;&nbsp;&nbsp;&nbsp;
                  <select  name="coveragearea">
				  <option value="0" selected>- Select -</option>
				<option	<?php if($coveragearea == "Alaska"){?>selected<?php } ?>>Alaska	</option>
				<option	<?php if($coveragearea == "Arizona"){?>selected<?php } ?>>Arizona</option>
				<option	<?php if($coveragearea == "Arkansas"){?>selected<?php } ?>>Arkansas</option>
				<option	<?php if($coveragearea == "California"){?>selected<?php } ?>>California</option>
				<option	<?php if($coveragearea == "Colorado"){?>selected<?php } ?>>Colorado</option>
				<option	<?php if($coveragearea == "Connecticut"){?>selected<?php } ?>>Connecticut</option>
				<option	<?php if($coveragearea == "Delaware"){?>selected<?php } ?>>Delaware</option>
				<option	<?php if($coveragearea == "Florida"){?>selected<?php } ?>>Florida</option>
				<option	<?php if($coveragearea == "Georgia"){?>selected<?php } ?>>Georgia</option>
				<option	<?php if($coveragearea == "Hawaii"){?>selected<?php } ?>>Hawaii</option>
				<option	<?php if($coveragearea == "Idaho"){?>selected<?php } ?>>Idaho</option>
				<option	<?php if($coveragearea == "Illinois"){?>selected<?php } ?>>Illinois</option>
				<option	<?php if($coveragearea == "Indiana"){?>selected<?php } ?>>Indiana</option>
				<option	<?php if($coveragearea == "Iowa"){?>selected<?php } ?>>Iowa</option>
				<option	<?php if($coveragearea == "Kansas"){?>selected<?php } ?>>	Kansas</option>
				<option	<?php if($coveragearea == "Kentucky"){?>selected<?php } ?>>Kentucky</option>
				<option	<?php if($coveragearea == "Louisiana"){?>selected<?php } ?>>Louisiana</option>
				<option	<?php if($coveragearea == "Maine"){?>selected<?php } ?>>Maine</option>
				<option	<?php if($coveragearea == "Maryland"){?>selected<?php } ?>>Maryland</option>
				<option	<?php if($coveragearea == "Massachusetts"){?>selected<?php } ?>>Massachusetts</option>
				<option	<?php if($coveragearea == "Michigan"){?>selected<?php } ?>>Michigan</option>
				<option	<?php if($coveragearea == "Minnesota"){?>selected<?php } ?>>	Minnesota</option>
				<option	<?php if($coveragearea == "Mississippi"){?>selected<?php } ?>>	Mississippi</option>
				<option	<?php if($coveragearea == "Missouri"){?>selected<?php } ?>>Missouri</option>
				<option	<?php if($coveragearea == "Montana"){?>selected<?php } ?>>Montana</option>
				<option	<?php if($coveragearea == "Nebraska"){?>selected<?php } ?>>Nebraska</option>
				<option	<?php if($coveragearea == "Nevada"){?>selected<?php } ?>>Nevada</option>
				<option	<?php if($coveragearea == "New Hampshire"){?>selected<?php } ?>>New Hampshire</option>
				<option	<?php if($coveragearea == "New Jersey"){?>selected<?php } ?>>New Jersey</option>
				<option	<?php if($coveragearea == "New Mexico"){?>selected<?php } ?>>New Mexico</option>
				<option	<?php if($coveragearea == "New York"){?>selected<?php } ?>>New York</option>
				<option	<?php if($coveragearea == "North Carolina"){?>selected<?php } ?>>North Carolina	</option>
				<option	<?php if($coveragearea == "North Dakota"){?>selected<?php } ?>>North Dakota</option>
				<option	<?php if($coveragearea == "Ohio"){?>selected<?php } ?>>Ohio</option>
				<option	<?php if($coveragearea == "Oklahoma	"){?>selected<?php } ?>>Oklahoma</option>
				<option	<?php if($coveragearea == "Oregon"){?>selected<?php } ?>>	Oregon</option>
				<option	<?php if($coveragearea == "Pennsylvania"){?>selected<?php } ?>>Pennsylvania</option>
				<option	<?php if($coveragearea == "Rhode Island"){?>selected<?php } ?>>Rhode Island</option>
				<option	<?php if($coveragearea == "South Carolina"){?>selected<?php } ?>>South Carolina</option>
				<option	<?php if($coveragearea == "South Dakota"){?>selected<?php } ?>>South Dakota</option>
				<option	<?php if($coveragearea == "Tennessee"){?>selected<?php } ?>>Tennessee</option>
				<option	<?php if($coveragearea == "Texas"){?>selected<?php } ?>>Texas</option>
				<option	<?php if($coveragearea == "Utah"){?>selected<?php } ?>>Utah</option>
				<option	<?php if($coveragearea == "Vermont"){?>selected<?php } ?>>Vermont</option>
				<option	<?php if($coveragearea == "Virginia"){?>selected<?php } ?>>	Virginia</option>
				<option	<?php if($coveragearea == "Washington"){?>selected<?php } ?>>Washington</option>
				<option	<?php if($coveragearea == "West Virginia"){?>selected<?php } ?>>	West	Virginia</option>
				<option	<?php if($coveragearea == "Wisconsin"){?>selected<?php } ?>>Wisconsin</option>
				<option	<?php if($coveragearea == "Wyoming"){?>selected<?php } ?>>Wyoming</option>
				<option	<?php if($coveragearea == "District of Columbia"){?>selected<?php } ?>>District of Columbia</option>

</select></div>
	</div>
</td>


		</tr>
  </table>
  
</form>
</body>
</html>

Answer : Select pulldown box B based on selection made in pulldown box A or data from database using  php and javascript

Well I found a solution.  I change the javascript used to display the divs to an onload function and I created a php variable to set the initial status of the style display of the div.  Then onchange the javascript forces the div display status to a new setting.  Below is the code.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:

 <?php

require_once("cmscommon.inc");


?>
<html>
<head>
<title>CMS Article Entry/Edit</title>
<STYLE TYPE="text/css">
	.headw  { font: BOLD 14pt arial, helvetica, sans-serif; }
	.headw { color: #336600; }
	.headk  { font: BOLD 11pt arial, helvetica, sans-serif; }
	.headk { color: #336600; }
	.smallk { font: 10pt arial, helvetica, sans-serif; }
	.smallgk { font: 10pt arial, helvetica, sans-serif; }
	.smallgk { color: #336600; }
	.tinyk  { font: 8pt arial, helvetica, sans-serif; }


    </style>

  <script type="text/javascript">
    window.onload = function() 
	{
        var eSelect = document.getElementById('appselect');
		
        eSelect.onchange = function() 
		{
            if(eSelect.selectedIndex === 0) 
			{
           document.getElementById('cdiv2').style.display='none';
		   document.getElementById('cdiv3').style.display='none';
		   }
		    else if(eSelect.selectedIndex === 1)
			 {
           document.getElementById('cdiv2').style.display='none';
		   document.getElementById('cdiv3').style.display='none';
            }
			 else if(eSelect.selectedIndex === 2)
			 {
           document.getElementById('cdiv2').style.display='block';
		   document.getElementById('cdiv3').style.display='none';
            }
		   else if(eSelect.selectedIndex === 3)
			 {
           document.getElementById('cdiv2').style.display='none';
		   document.getElementById('cdiv3').style.display='block';
            }
        }
    }
  </script>
 </head>
 
<?php

	  
	  $sql = "SELECT * FROM cmsmain WHERE cmsid = 100606";
	  $result = db_query($sql, $db);        
      $myrow = mysql_fetch_array($result);
	  $coveragearea=$myrow["coveragearea"];
	  $application=$myrow["application"];
	  $topicid = $myrow["topicid"];


		$sql = "SELECT * FROM cmstopic";
		$topicresult = db_query($sql, $db);

  ?> 

<body link="#336600" alink="#669966" vlink="#669966" >
	
<form name="addarticle" method="post" action="2.3EditorUpdateDatabase.php">


<input type="hidden" name="cmsid" value="<?php echo $cmsid?>">


  <table width="100%" cellpadding="0" cellspacing="4" border="0" bgcolor="#FFFFFF">
	<tr>
	<td align="left" width="20%" class="smallgk"><b>Application:</b></td>
	<td width="30%" align="left"><select id="appselect"  name="application" >
          <option  <?php if($application == ""){?> selected <?php } ?>value="">Please Select</option>
          <option <?php if($application == "Need To Know Guides"){?> selected <?php } ?>value="Need to Know Guides">Need To Know Guides</option>
          <option <?php if($application == "Buying Guides"){?> selected <?php } ?>value="Buying Guides">Buying Guides</option>
		  <option <?php if($application == "Local Page Articles"){?> selected <?php } ?>value="Local Page Articles">Local Page Articles</option>
        </select></td>
	
	<?php if($application == 'Buying Guides'){$topicstatus='block';}else{$topicstatus='none'; } ?>
	<?php if($application == 'Local Page Articles'){$castatus='block';}else{$castatus='none'; } ?>	
	
<td width="49%" align="left" class="smallgk"><b>

	<div   id="cdiv2" style="display: <?php echo $topicstatus; ?>;" >

	Topic:&nbsp;&nbsp;&nbsp;&nbsp;
	  <select  name="topic">
	  <option value="" selected>- Select -</option>
	  <?php
	     while ($mytopic = mysql_fetch_array($topicresult))
			{
			?>
			<option value="<?php echo $mytopic["topicid"]; ?>"	<?php if($topicid == $myrow["topicid"]){?>selected<?php } ?>><?php echo $mytopic["topicname"] ?></option>
			<?php
			}
			?>
		</select>
			  </div>
<div   id="cdiv3" style="display: <?php echo $castatus; ?>;" >

	
	    Coverage Area:&nbsp;&nbsp;&nbsp;&nbsp;
                  <select  name="coveragearea">
				  <option value="0" selected>- Select -</option>
				<option	<?php if($coveragearea == "Alaska"){?>selected<?php } ?>>Alaska	</option>
				<option	<?php if($coveragearea == "Arizona"){?>selected<?php } ?>>Arizona</option>
				<option	<?php if($coveragearea == "Arkansas"){?>selected<?php } ?>>Arkansas</option>
				<option	<?php if($coveragearea == "California"){?>selected<?php } ?>>California</option>
				<option	<?php if($coveragearea == "Colorado"){?>selected<?php } ?>>Colorado</option>
				<option	<?php if($coveragearea == "Connecticut"){?>selected<?php } ?>>Connecticut</option>
				<option	<?php if($coveragearea == "Delaware"){?>selected<?php } ?>>Delaware</option>
				<option	<?php if($coveragearea == "Florida"){?>selected<?php } ?>>Florida</option>
				<option	<?php if($coveragearea == "Georgia"){?>selected<?php } ?>>Georgia</option>
				<option	<?php if($coveragearea == "Hawaii"){?>selected<?php } ?>>Hawaii</option>
				<option	<?php if($coveragearea == "Idaho"){?>selected<?php } ?>>Idaho</option>
				<option	<?php if($coveragearea == "Illinois"){?>selected<?php } ?>>Illinois</option>
				<option	<?php if($coveragearea == "Indiana"){?>selected<?php } ?>>Indiana</option>
				<option	<?php if($coveragearea == "Iowa"){?>selected<?php } ?>>Iowa</option>
				<option	<?php if($coveragearea == "Kansas"){?>selected<?php } ?>>	Kansas</option>
				<option	<?php if($coveragearea == "Kentucky"){?>selected<?php } ?>>Kentucky</option>
				<option	<?php if($coveragearea == "Louisiana"){?>selected<?php } ?>>Louisiana</option>
				<option	<?php if($coveragearea == "Maine"){?>selected<?php } ?>>Maine</option>
				<option	<?php if($coveragearea == "Maryland"){?>selected<?php } ?>>Maryland</option>
				<option	<?php if($coveragearea == "Massachusetts"){?>selected<?php } ?>>Massachusetts</option>
				<option	<?php if($coveragearea == "Michigan"){?>selected<?php } ?>>Michigan</option>
				<option	<?php if($coveragearea == "Minnesota"){?>selected<?php } ?>>	Minnesota</option>
				<option	<?php if($coveragearea == "Mississippi"){?>selected<?php } ?>>	Mississippi</option>
				<option	<?php if($coveragearea == "Missouri"){?>selected<?php } ?>>Missouri</option>
				<option	<?php if($coveragearea == "Montana"){?>selected<?php } ?>>Montana</option>
				<option	<?php if($coveragearea == "Nebraska"){?>selected<?php } ?>>Nebraska</option>
				<option	<?php if($coveragearea == "Nevada"){?>selected<?php } ?>>Nevada</option>
				<option	<?php if($coveragearea == "New Hampshire"){?>selected<?php } ?>>New Hampshire</option>
				<option	<?php if($coveragearea == "New Jersey"){?>selected<?php } ?>>New Jersey</option>
				<option	<?php if($coveragearea == "New Mexico"){?>selected<?php } ?>>New Mexico</option>
				<option	<?php if($coveragearea == "New York"){?>selected<?php } ?>>New York</option>
				<option	<?php if($coveragearea == "North Carolina"){?>selected<?php } ?>>North Carolina	</option>
				<option	<?php if($coveragearea == "North Dakota"){?>selected<?php } ?>>North Dakota</option>
				<option	<?php if($coveragearea == "Ohio"){?>selected<?php } ?>>Ohio</option>
				<option	<?php if($coveragearea == "Oklahoma	"){?>selected<?php } ?>>Oklahoma</option>
				<option	<?php if($coveragearea == "Oregon"){?>selected<?php } ?>>	Oregon</option>
				<option	<?php if($coveragearea == "Pennsylvania"){?>selected<?php } ?>>Pennsylvania</option>
				<option	<?php if($coveragearea == "Rhode Island"){?>selected<?php } ?>>Rhode Island</option>
				<option	<?php if($coveragearea == "South Carolina"){?>selected<?php } ?>>South Carolina</option>
				<option	<?php if($coveragearea == "South Dakota"){?>selected<?php } ?>>South Dakota</option>
				<option	<?php if($coveragearea == "Tennessee"){?>selected<?php } ?>>Tennessee</option>
				<option	<?php if($coveragearea == "Texas"){?>selected<?php } ?>>Texas</option>
				<option	<?php if($coveragearea == "Utah"){?>selected<?php } ?>>Utah</option>
				<option	<?php if($coveragearea == "Vermont"){?>selected<?php } ?>>Vermont</option>
				<option	<?php if($coveragearea == "Virginia"){?>selected<?php } ?>>	Virginia</option>
				<option	<?php if($coveragearea == "Washington"){?>selected<?php } ?>>Washington</option>
				<option	<?php if($coveragearea == "West Virginia"){?>selected<?php } ?>>	West	Virginia</option>
				<option	<?php if($coveragearea == "Wisconsin"){?>selected<?php } ?>>Wisconsin</option>
				<option	<?php if($coveragearea == "Wyoming"){?>selected<?php } ?>>Wyoming</option>
				<option	<?php if($coveragearea == "District of Columbia"){?>selected<?php } ?>>District of Columbia</option>


</select></div>

</td>


		</tr>
  </table>
  
</form>
</body>
</html>
Random Solutions  
 
programming4us programming4us