Need help customizing existing DHTML code.

[comaiwat]

Here is the link where DHTML is use at; http://www.waitnot.com/CustHtml/HotWater/howtobuy.htm then take a look at the drop down. This is a really nice feature where you click on the dropdown choice then the address of that city opened up.

Now for mine customized version of it I would like to be able to have two drop down choices for example.

1st drop down choices will have list of States.
2nd drop down will coinside with which States I pick, which show the list of the cities.
Then once you piced that city you get the addresses information display.

Can someone help me with this. I'm not a programmer, but can decipher very well I'm a copy and paste type. Please advise if you can. Thanks.

[spinal007]

this should do...
the script is really simple and I coded it in record time but it can always be improved in the future if necessary.

you can copy the code below and save it as a html file so you'll be able to see the script in action, plus it has the basic instructions of what to do....

let me know if you need help.

Code: Select all

<SCRIPT language="JSCript">
/* BEGIN BROWSER HANDLING, DON'T TOUCH */
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
function getObj(elementName){
  if(isNS4){ return document.layers[elementName]; }
  else if (isIE4 || isIE5){ return document.all(elementName); }
  else if (isNS6){ return document.getElementById(elementName); }
}
function Show(id){ if(getObj(id)){ getObj(id).style.display = 'block'; } }
function Hide(id){ if(getObj(id)){ getObj(id).style.display = 'none'; } }
/* END BROWSER HANDLING */

/*
we'll need to remeber which item we display so that
we can hide it later on, when we want to display a different item
*/
var previous_state; // this var will hold the id of the current state
var previous_city; // this var will hold the id of the current city

// this function will display a list of cities according to their state
function ShowCities(state){
  this_state = "selCities_" + state;
  if(previous_state){ Hide(previous_state); }
  if(previous_city){ Hide(previous_city); }
  Show(this_state);
  previous_state = this_state;
}

// this function will display the address according to the chosen city
function ShowAddress(city){
  this_city = "divAddress_" + city;
  if(previous_city){ Hide(previous_city); }
  Show(this_city);
  previous_city = this_city;
}
</SCRIPT>

<table width=100% border=1 cellspacing=5>
  <tr>
    <td valign=top width=33%>
      <select name="state" id="state" onChange="ShowCities(this.value);">
        <OPTION value="NY">New York</OPTION>
        <OPTION value="LA">Los Angeles</OPTION>
      </select>
      <HR>
      this list holds all the states.
      we''l use thbe value of this list to display the cities
    </td>
    <td valign=top width=33%>
      <select id="selCities_NY" onChange="ShowAddress(this.value);" style="display:none;">
        <OPTION value="City1">City 1</OPTION>
        <OPTION value="City2">City 2</OPTION>
        <OPTION value="City3">City 3</OPTION>
        <OPTION value="City4">City 4</OPTION>
        <OPTION value="City5">City 5</OPTION>
      </select>
      <select id="selCities_LA" onChange="ShowAddress(this.value);" style="display:none;">
        <OPTION value="City6">City 6</OPTION>
        <OPTION value="City7">City 7</OPTION>
        <OPTION value="City8">City 8</OPTION>
        <OPTION value="City9">City 9</OPTION>
      </select>
      <HR>
      the list of cities will show up here. you can add as many as you want, but
      you MUST set the id attribute to:
      <LI>"selCities_[state id]"
    </td>
    <td valign=top width=33%>

<div class=Address id="divAddress_City1" style="display:none;">
  NY
addres for city 1
111111111
</div>
<div class=Address id="divAddress_City2" style="display:none;">
  NY
addres for city 2
222222222
</div>
<div class=Address id="divAddress_City3" style="display:none;">
  NY
addres for city 3
33333333
</div>
<div class=Address id="divAddress_City4" style="display:none;">
  NY
addres for city 4
44444444
</div>
<div class=Address id="divAddress_City5" style="display:none;">
  NY
addres for city 5
55555555
</div>
<div class=Address id="divAddress_City6" style="display:none;">
  LA
addres for city 6
66666666
</div>
<div class=Address id="divAddress_City7" style="display:none;">
  LA
addres for city 7
7777777
</div>
<div class=Address id="divAddress_City8" style="display:none;">
  LA
addres for city 8
88888888
</div>
<div class=Address id="divAddress_City9" style="display:none;">
  LA
addres for city 9
99999999
</div>
      <HR>
      the addresses will show up here. you can add as many as you want, but
      again, you MUST set the id attribute to:
      <LI>"divAddress_[state id]"
    </td>
  </tr>
</table>

[comaiwat]

Man! you are geat spinal007, Thank you sooo much.. I'll make sure to put this code in good use. Thanks a bunch

[spinal007]

no worries...