Member Avatar for brimike

Hello, Having a bit of an issue here. Can't seem to fugure out how to display the proper text along with an image when a user selects a drop-down. When you select a catagory and a sub cat the text diaplys fine but when going to a another cat the text does not display only the first div displays. Any help would be greatly appreciated.

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.doublecombo.example.selectedIndex
var selectedItem2=document.doublecombo.stage2.selectedIndex
contractall()
document.getElementById("dropmsgA"+selectedItem "+B"+selectedItem2).style.display="block"
}
}

/*
function expandone(){
if (document.getElementById){
var selectedItem=document.doublecombo.stage2.selectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).style.display="block"
}
}
*/
if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)

</script>
<style type="text/css">
<!--
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px; color: #142f57;
}
.name {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color:#255ba8; font-weight: bold;  
}

-->
</style>

</head>

<body>
<noscript>NOTE: Your browser does not support JavaScript
    or support has been turned off. Sorry!</noscript>
<form name="doublecombo" style="background-color:#f4f6fb;">
  <table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="55%">


    <div class="dropcontent style1" id="dropmsg0"><br />
<span class="name">The Village Directory Map</span><br />
To search use the Category dropdown menus. </div>

<div class="dropcontent style1" id="dropmsg1"><br />
<span class="name">Aegean Treasures</span><br />
Eclectic designer boutique. Eileen Fisher and jewelry galore. 
239.434.2444 </div>


<div class="dropcontent style1" id="dropmsg2"><br />
<span class="name">H.T. Chittum & Co.</span><br />
Casual sportswear, Lacoste, Tommy Bahama and more. 
239.643.5150  </div>

<div class="dropcontent style1" id="dropmsg3"><br />
<span class="name">Mondo Uomo</span><br />
Brioni, Canali, Zanella, Hickey Freeman and more. 
239.434.9484   </div>


</td>

<td width="40%"valign="top"><div align="right"><br />
      <select name="example" size="1" style="background-color:#ffffff; color:#142f57;" class="dropdown1" onchange="redirect(this.options.selectedIndex)">
        <option>Category</option>
        <option>Womens Apparel</option>
        <option>Mens Apparel</option>
              </select> &nbsp;
      <select name="stage2" size="1" style="background-color:#ffffff; color:#142f57;" class="dropdown1" onchange="changePicture(); expandone();">
        <option value=" ">Please Select a Category</option>

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

  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><br /><img src="directory/map.jpg" name="pic" border="0" id="pic" /></td>
  </tr>
</table>

<script>
<!--

/*
Double Combo 
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Please Select a Category", "directory/map.jpg")

group[1][0]=new Option("Stores", "directory/map.jpg")
group[1][1]=new Option("Aegean Treasures", "directory/818_map.jpg")


group[2][0]=new Option("Stores", "directory/map.jpg")
group[2][1]=new Option("H.T. Chittum & Co.","directory/4242_map.jpg")


var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}


function changePicture()
{
var selection = temp.options.selectedIndex; //grabs what user selected
document.pic.src = temp.options[selection].value; //adds 'selection' to grab 'value'
}



//function displayinfo()
//{
//document.getElementById('DivExample').innerHTML="1,2,3,4,5,6,7,8,9,10,11";-->
//}
//-->


</script>
</form>


</body>
</html>
Edited by Nick Evan because: Fixed formatting
  • 2 Contributors
  • 1 Reply
  • 146 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

I've gone into lite modification in your code. This document is a valid HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head>
<title><!--Sample--></title>
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; color: #142f57;
}
.name {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color:#255ba8; font-weight: bold;
}
-->
</style>
<script type="text/javascript">
<!--
function contractall() {

if (document.getElementById)
{
var inc = 0;
while(document.getElementById("dropmsg"+inc)) { document.getElementById("dropmsg"+inc).style.display = "none";
inc++;
  } 
 } 
} 

function expandone(e){
e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;
var selectedItem = ( document.doublecombo.example.selectedIndex == 2 ) ? ((document.doublecombo.stage2.selectedIndex +1)*(document.doublecombo.stage2.selectedIndex)) : document.doublecombo.stage2.selectedIndex;
 
if (document.getElementById){

contractall();

document.getElementById("dropmsg"+selectedItem).style.display= "block"
 } } 
if (window.addEventListener)
window.addEventListener("load", expandone, false);

else if (window.attachEvent)
window.attachEvent("onload", expandone);

else window.onload = expandone;

//-->
</script>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
 
</head> 
<body>
<noscript> NOTE: Your browser does not support JavaScript or support has been turned off. Sorry! </noscript>
<form name="doublecombo" action="#" style="background-color:#f4f6fb;">
<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="55%">
<div class="dropcontent style1" id="dropmsg0"><br>
<span class="name">The Village Directory Map</span><br>
To search use the Category dropdown menus. </div>
<div class="dropcontent style1" id="dropmsg1"><br>
<span class="name">Aegean Treasures</span><br>
Eclectic designer boutique. Eileen Fisher and jewelry galore.
239.434.2444 </div>
<div class="dropcontent style1" id="dropmsg2"><br>
<span class="name">H.T. Chittum & Co.</span><br>
Casual sportswear, Lacoste, Tommy Bahama and more.
239.643.5150 </div>
<div class="dropcontent style1" id="dropmsg3"><br>
<span class="name">Mondo Uomo</span><br>
Brioni, Canali, Zanella, Hickey Freeman and more.
239.434.9484 </div>
</td>
<td width="40%"valign="top"><div align="right"><br>
<select name="example" size="1" style="background-color:#ffffff; color:#142f57;" class="dropdown1" onchange="redirect(this.options.selectedIndex);expandone();">
<option>Category</option>
<option>Womens Apparel</option>
<option>Mens Apparel</option>
</select> &nbsp;
<select name="stage2" size="1" style="background-color:#ffffff; color:#142f57;" class="dropdown1" onchange="changePicture(); expandone();">
<option value=" ">Please Select a Category</option>
</select>
</div></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><br><img src="directory/map.jpg" alt="somePic.jpg" name="pic" border="0" id="pic"></td>
</tr>
</table>
</form>
<script type="text/javascript">
<!--
/*
Double Combo
*/
var groups = document.doublecombo.example.options.length;

var group=new Array(groups)
for (i=0; i<groups; i++)
group[i] = [];
group[0][0] = new Option("Please Select a Category", "directory/map.jpg");

group[1][0] = new Option("Stores", "directory/map.jpg");

group[1][1] = new Option("Aegean Treasures","directory/818_map.jpg");

group[2][0] = new Option("Stores", "directory/map.jpg");

group[2][1] = new Option("H.T. Chittum & Co.","directory/4242_map.jpg");

var temp = document.doublecombo.stage2

function redirect(x)
{
for ( m = temp.options.length-1; m > 0;m-- )
temp.options[m] = null;
for (i = 0; i < group[x].length;i++) {
temp.options[i] = new Option(group[x][i].text,group[x] [i].value);
} temp.options[0].selected=true
} 

function changePicture()
{ var selection = temp.options.selectedIndex; 

//grabs what user selected

document.pic.src = temp.options[selection].value; 

//adds 'selection' to grab 'value'
}

function displayinfo()
{
document.getElementById('DivExample').innerHTML= "1,2,3,4,5,6,7,8,9,10,11";
}
//-->
</script> 
</body> 
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.