JAVASCRIPT for Drop Down OnChange

**gits** · Jul 12 '07, 11:19 AM

hi ...

as far as i understand: you want 2 dropdowns ... 1 with the 2 categories (js, webres) ... and one that depends on the selection of the first and shows different subitems of the category?

you have different possibilities for that: create 2 select-boxes that are displayed/hidden (set the style display: none/block) when you select a value from the first one ... or dynamically create the options dependent to your selection (with dom-methods) ...

kind regards

**ikilldeath** · Jul 12 '07, 11:24 AM

Originally posted by gits

hi ...

as far as i understand: you want 2 dropdowns ... 1 with the 2 categories (js, webres) ... and one that depends on the selection of the first and shows different subitems of the category?

you have different possibilities for that: create 2 select-boxes that are displayed/hidden (set the style display: none/block) when you select a value from the first one ... or dynamically create the options dependent to your selection (with dom-methods) ...

kind regards

Thanks Gits for ur reply.

I want the first drop down for sure, but the second should remain in the list structure, same as it was in the shown example. Also i am very much new to JavaScript. PLease let me know if it is possible.

Regards,
Siva

**gits** · Jul 12 '07, 11:45 AM

of course it is possible ... the simple way is:

create two div-containers for the lists and use the set style method i mentioned above ... onchange of your selection you call a method that toggles the visibilty of the corresponding div ...

kind regards

**ikilldeath** · Jul 12 '07, 11:56 AM

I am sorry, can you help me out in the coding if possible

**ikilldeath** · Jul 12 '07, 12:11 PM

<html>
<body>
<table>
<tr>
<td align="left" width="10%">
<img border="0" src="/OCL/images/gs_primary_logo _blue.gif" width="72" height="72">
</td>
<td align="center" width="80%"><di v class="pagetitl e">Online Check List</div><div class="pagetitl e2">Task List - <script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday", "Monday","Tuesd ay","Wednesday" ,"Thursday","Fr iday","Saturday ")
var monthname=new Array("Jan","Fe b","Mar","Apr", "May","Jun","Ju l","Aug","Sep", "Oct","Nov","De c")
document.write( weekday[d.getDay()] + " ")
document.write( d.getDate() + ". ")
document.write( monthname[d.getMonth()] + " ")
document.write( d.getFullYear() )
</script>
</div></td>
<td align="right" width="10%">
<a href="/OCL"><img border="0" src="/OCL/images/newocllogo.gif" width="154" height="85"></font></a>
</td>
</tr>
<tr>
<td colspan="3"><di v class="nav">
Welcome Siva Samudrala
</div></td>
</tr>
</table>
</body>
</html></td></center>
</tr>
<tr>
<td width="15%" valign="top">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Task List</title>
<style>
/* CSS Document */
h1 {
text-decoration: none;
color: #333333;
font-size:120%;
padding:3px 3px 3px 10px;
margin:0px 0px 1px 0px;
font-weight: bold;
background-color:#CAD2DB;
}
h2 {
text-decoration: none;
padding:3px 3px 3px 10px;
margin:0px 0px 1px 0px;
color: #333333;
font-size:100%;
font-weight: bold;
background-color: #E5E5E5;
}
h3 {
text-decoration: none;
margin:0px 0px 1px 0px;
border-bottom:1px solid #CCCCCC;
padding:7px 3px 3px 10px;
color: #333333;
font-size:100%;
}
h4 {
text-decoration: none;
color: #333333;
font-size:120%;
padding:5px 3px 3px 10px;
margin:0px 0px 1px 0px;
background-color:#FFCC33;
}
.pagetitle {
text-decoration: none;
color: #333333;
font-size:200%;
font-weight: bold;
padding:5px 15px 3px 0px;
margin:5px 15px 0px 15px;
border-bottom:1px solid #666666
}
.pagetitle2 {
font-size:150%;
color:#666;
padding:5px 15px 3px 0px;
margin:5px 15px 0px 15px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

/* BODY TEXT */
xsmall,
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:70%;
margin:0px;
}
a:hover {
color: #BC391B;
}
/* TABLES */
td.datatable {
background-color:#FFFFFF;
border-bottom:1px solid #E0E0E0;
border-left:0px;
border-right:0px;
padding:2px;
margin:0px;
}
table.datatable {
background-color:#999999;
border:1px solid #333333
}
tr.datatable {
background-color:#BEC7DE;
text-align:center;
font-weight:bold;
}
tr.r1{
background-color:#FFFFE5
}
tr.r2{
background-color:#EEEED6
}
/* FORM ELEMENTS & TAGS */
input,
select,
textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
margin:0px;
}
.multiselect{
width:135px
}
form {
margin:0px;
padding:1px;
}
.button {
background-color : #FCD775;
font-weight : bold;
font-size:11px
}
hr {
height:1;
color:#CCCCCC;
margin-bottom:10px;
}
ul,
ol {
margin:0px;
padding:0px 0px 3px 10px;
list-style:none;
}
li {
padding:0px;
margin:1px;
line-height:150%;
}
ul.bulleted,
ol.bulleted {
list-style-image: url(gif/ms_bullet.gif);
padding-top:5px;
margin-left:5px;
}
ul.bulleted li {
margin-left:10px;
}
p,
br {
padding:5px 10px;
margin:0px;
}
th {
background-color:#D9D9D9;
font-size:80%
}
td {
font-size:70%;
}
/* PAGE HEADER */
#header {
height:67px;
background:#fff ;
}
#header a.logo {
position:absolu te;
width:72px;
height:72px;
left:15px;
top:15px;
background:#fff url('../gif/gs_primary_logo _blue.gif') no-repeat;
padding:0px;
margin:0px;
}
#header .title {
position:absolu te;
top:25px;
left:95px;
font-size:200%;
color:#000000;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

#header .title2 {
top:52px;
left:95px;
font-size:130%;
color:#666;
position:absolu te;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
/* NAVIGATION */
.nav {
position:relati ve;
text-align:left;
width:100%;
font-weight:bold;
background-image: url(../images/gradient_bar_bl ue3.gif);
padding:6px 5px 0px 10px;
height:27px;
margin:0px 0px 1px 0px;
white-space:nowrap;
color:#990000;
}
.nav a {
COLOR: #000;
text-decoration:none ;
text-align:left;
}
.nav a:hover {
color: #BC391B;
text-decoration:none ;
}
.nav a:visited {
text-align:left;
}
/* TOP RIGHT NAV */
.nav2 {
text-align:right;
padding:5px;
width:100%;
}
.nav2 a {
text-decoration:none ;
color:#000099;
}
.nav2 a:hover {
text-decoration:none ;
color:#BC391B;
}
.nav2 a:visited {
text-decoration:none ;
color:#000099;
}
/* SUB NAVIGATION */
.subnav {
width:100%;
background-color:#EEEEEE;
padding:5px 5px 5px 10px;
margin:0px;
color: #CC3300;
font-weight:bold;
}
.subnav a {
COLOR: #000000;
text-decoration:none ;
font-weight:normal;
}
.subnav a:visited {
COLOR:#660066;
}
.subnav a:hover {
color: #BC391B;
text-decoration:none ;
}
/* SIDENAV */
.sidenav {
background-color:#EEEEEE;
}
.sidenavheader {
background-color:#BEC7DE
}
.sidenav a {
COLOR: #000099;
text-decoration:none ;
}
.sidenav a:visited {
COLOR:#333399;
}
.sidenav a:hover {
color: #BC391B;
text-decoration:none ;
}
/* BREADCRUMBS */
.breadcrumbs {
text-align:left;
padding:5px 5px 5px 10px;
margin:0px;
border-bottom:1px solid #EEEEEE;
font-weight:bold;
color: #666666
}
.breadcrumbs a {
text-align:left;
font-weight: normal;
}
.breadcrumbs a:visited {
color: #660066;
}
/* HIGHLIGHTS & IMAGES */
.highlight {
background-color:#FFFFCC;
}
.highlightBox {
position:relati ve;
border:1px solid #000;
padding:7px;
margin:5px;
background-color:#FFFFCC;
left: 0px;
}
.imageBox {
position:relati ve;
left:10px;
top:5px;
width:72px;
height:72px;
width:100%;
background: url('http://home.web.gs.com/icg/html_email/images/email-13.jpg') no-repeat;
padding:0px 10px 10px 76px;
}
/* ERROR */
.error {
color:#CC0000
}
/* FOOTER */
.footer {
background-color:#EEEEEE;
text-align:right;
width:100%;
padding:5px;
margin-top:10px;
border-top:1px solid #CCCCCC
}

#foldheader {
margin-left: 10px;
cursor:pointer;
cursor:hand;
font-weight:bold;
list-style-image:url('../images/folder.gif')
}
#foldinglist {
margin-left: 10px;
list-style-image:url('../images/page.gif')
}

</style>

<script language="JavaS cript">
//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var ns6=document.ge tElementById&&! document.all
var ie4=document.al l&&navigator.us erAgent.indexOf ("Opera")==-1

function checkcontained( e)
{
var iscontained=0
cur=ns6? e.target : event.srcElemen t
i=0
if (cur.id=="foldh eader")
{
iscontained=1
}
else
{
while (ns6&&cur.paren tNode||(ie4&&cu r.parentElement ))
{
if (cur.id=="foldh eader"||cur.id= ="foldinglis t")
{
iscontained=(cu r.id=="foldhead er")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentEleme nt
}
}
if (iscontained)
{
var foldercontent=n s6? cur.nextSibling .nextSibling : cur.all.tags("U L")[0]
if (foldercontent. style.display== "none")
{
foldercontent.s tyle.display=""
cur.style.listS tyleImage="url( ../images/folderopen.gif) "
}
else
{
foldercontent.s tyle.display="n one"
cur.style.listS tyleImage="url( ../images/folder.gif)"
}
}
}
if (ie4||ns6)
document.onclic k=checkcontaine d
</script>
</head>
<body>
<form name="Departmen tForm" method="post" action="/OCL/do/UpdateNavigator ;jsessionid=A30 3839C692DDC32AB 7A73623B68EE7B. worker1">
<div class="sidenav" >
<table width="100%" border=2 bordercolor=#00 0000 valign="top" >
<tr>
<td class="sidenavh eader"><b>DIVIS ION</b></td
</tr>
<tr>
<td bordercolor=#FF FFFF>Operations </td>
</tr>
<tr>
<td class="sidenavh eader"><b>DEPAR TMENT</b></td>
</tr>
<tr>
<td bordercolor=#FF FFFF>
<select name="departmen tID" onchange="this. form.submit();" ><option value="2" selected>Equiti es</option>
<option value="1" >Factory</option></select>
</td>
</tr>
<tr>
<td class="sidenavh eader"><b>TEAMS/TASK LISTS</b></td>
</tr>
<tr>
<td bordercolor=#FF FFFF>
<ul>
<li id="foldheader" >Emergings Markets & Spain</li>
<ul id="foldinglist " style="display: none">
<li><a href=SetupTaskL ist?listID=2>Em erging Mkts & Spain - Managers</a></li>
<li><a href=SetupTaskL ist?listID=3>Sp ain</a></li>
<li><a href=SetupTaskL ist?listID=4>Eg ypt</a></li>
<li><a href=SetupTaskL ist?listID=5>Po land</a></li>
<li><a href=SetupTaskL ist?listID=6>Tu rkey</a></li>
<li><a href=SetupTaskL ist?listID=7>Cz ech Republic</a></li>
<li><a href=SetupTaskL ist?listID=8>Hu ngary</a></li>
<li><a href=SetupTaskL ist?listID=9>Ru ssia</a></li>
<li><a href=SetupTaskL ist?listID=10>S outh Africa</a></li>
<li><a href=SetupTaskL ist?listID=11>I srael</a></li>
<li><a href=SetupTaskL ist?listID=12>G reece</a></li>
<li><a href=SetupTaskL ist?listID=36>E merging Mkts & Spain - Managers</a></li>
</ul>
<li id="foldheader" >Major Euro Markets Setts</li>
<ul id="foldinglist " style="display: none">
<li><a href=SetupTaskL ist?listID=30>M ajor Euro Markets - Managers</a></li>
<li><a href=SetupTaskL ist?listID=31>G ermany & Austria</a></li>
<li><a href=SetupTaskL ist?listID=32>F rance & Belgium</a></li>
<li><a href=SetupTaskL ist?listID=33>H olland, Italy & Portugal</a></li>
<li><a href=SetupTaskL ist?listID=34>S candinavia</a></li>
<li><a href=SetupTaskL ist?listID=35>E uroclear</a></li>
<li><a href=SetupTaskL ist?listID=37>E uroclear AE/BQ</a></li>
</ul>
<li id="foldheader" >Self Settlements</li>
<ul id="foldinglist " style="display: none">
<li><a href=SetupTaskL ist?listID=17>S elf Settlements - Managers</a></li>
<li><a href=SetupTaskL ist?listID=18>C rest</a></li>
<li><a href=SetupTaskL ist?listID=19>S wiss</a></li>
<li><a href=SetupTaskL ist?listID=22>R esiduals</a></li>
<li><a href=SetupTaskL ist?listID=24>S tamp</a></li>
</ul>
<li id="foldheader" >CFG</li>
<ul id="foldinglist " style="display: none">
<li><a href=SetupTaskL ist?listID=20>C FG MGMT</a></li>
<li><a href=SetupTaskL ist?listID=21>C FG TEAM</a></li>
</ul>
<li id="foldheader" >Projects</li>
<ul id="foldinglist " style="display: none">
<li><a href=SetupTaskL ist?listID=23>P rojects General</a></li>
</ul>
<li id="foldheader" >Prime Access Client Services</li>
<ul id="foldinglist " style="display: none">
<li><a href=SetupTaskL ist?listID=29>D aily Check List</a></li>
</ul>
</ul>
</td>
</tr>
<tr>
<td bordercolor=#FF FFFF>
<ul>
<li id="foldheader" >Maintenance</li>
<ul id="foldinglist " style="display: none" style=&{head};>
<li>
<a href="/OCL/do/SetupMaintTask; jsessionid=A303 839C692DDC32AB7 A73623B68EE7B.w orker1">Task</a>
</li>
<li>
<a href="/OCL/do/SetupMaintTaskl ist;jsessionid= A303839C692DDC3 2AB7A73623B68EE 7B.worker1">Tas kList</a>
</li>
</ul>
</ul>
</td>
</tr>
<tr id = data2>
<td bordercolor=#FF FFFF>
<ul>
<select name="TeamID" onchange="check mountained();"> <li id="foldheader" >Emergings Markets & Spain</li>
<ul id="dropinglist " >
<li><a href=SetupTaskL ist?listID=2>Em erging Mkts & Spain - Managers</a></li>
<li><a href=SetupTaskL ist?listID=3>Sp ain</a></li>
<li><a href=SetupTaskL ist?listID=4>Eg ypt</a></li>
<li><a href=SetupTaskL ist?listID=5>Po land</a></li>
<li><a href=SetupTaskL ist?listID=6>Tu rkey</a></li>
<li><a href=SetupTaskL ist?listID=7>Cz ech Republic</a></li>
<li><a href=SetupTaskL ist?listID=8>Hu ngary</a></li>
<li><a href=SetupTaskL ist?listID=9>Ru ssia</a></li>
<li><a href=SetupTaskL ist?listID=10>S outh Africa</a></li>
<li><a href=SetupTaskL ist?listID=11>I srael</a></li>
<li><a href=SetupTaskL ist?listID=12>G reece</a></li>
<li><a href=SetupTaskL ist?listID=36>E merging Mkts & Spain - Managers</a></li>
</ul>
<option value="2" selected><li id="foldheader" >Emergings Markets & Spain</li></option>
<li id="foldheader" >Major Euro Markets Setts</li>
<ul id="dropinglist " >
<li><a href=SetupTaskL ist?listID=30>M ajor Euro Markets - Managers</a></li>
<li><a href=SetupTaskL ist?listID=31>G ermany & Austria</a></li>
<li><a href=SetupTaskL ist?listID=32>F rance & Belgium</a></li>
<li><a href=SetupTaskL ist?listID=33>H olland, Italy & Portugal</a></li>
<li><a href=SetupTaskL ist?listID=34>S candinavia</a></li>
<li><a href=SetupTaskL ist?listID=35>E uroclear</a></li>
<li><a href=SetupTaskL ist?listID=37>E uroclear AE/BQ</a></li>
</ul>
<option value="10" selected><li id="foldheader" >Major Euro Markets Setts</li></option>
<li id="foldheader" >Self Settlements</li>
<ul id="dropinglist " >
<li><a href=SetupTaskL ist?listID=17>S elf Settlements - Managers</a></li>
<li><a href=SetupTaskL ist?listID=18>C rest</a></li>
<li><a href=SetupTaskL ist?listID=19>S wiss</a></li>
<li><a href=SetupTaskL ist?listID=22>R esiduals</a></li>
<li><a href=SetupTaskL ist?listID=24>S tamp</a></li>
</ul>
<option value="4" selected><li id="foldheader" >Self Settlements</li></option>
<li id="foldheader" >CFG</li>
<ul id="dropinglist " >
<li><a href=SetupTaskL ist?listID=20>C FG MGMT</a></li>
<li><a href=SetupTaskL ist?listID=21>C FG TEAM</a></li>
</ul>
<option value="5" selected><li id="foldheader" >CFG</li></option>
<li id="foldheader" >Projects</li>
<ul id="dropinglist " >
<li><a href=SetupTaskL ist?listID=23>P rojects General</a></li>
</ul>
<option value="6" selected><li id="foldheader" >Projects</li></option>
<li id="foldheader" >Prime Access Client Services</li>
<ul id="dropinglist " >
<li><a href=SetupTaskL ist?listID=29>D aily Check List</a></li>
</ul>
<option value="9" selected><li id="foldheader" >Prime Access Client Services</li></option></select>
</ul>
</td>
</tr>
</table>
</html>

This is the actual page i was talking about, you can see wat i have tried and where i went wrong, we have both folder and drop down structure

**gits** · Jul 12 '07, 05:10 PM

hi ...

wow ... that's a lot of code ... let me give you an example ... you may have a close look at it and adapt that to your needs:

[HTML]<script>
function toggle_list_vie w(selection) {
var val = selection.value ;
var view = {
js: 'js_list',
wb: 'ws_list'
};

for (var i in view) {
var list_view = document.getEle mentById(view[i]);
list_view.style .display = i == val ? 'block' : 'none';
}
}
</script>
<body>
<form>
<select id="category" onchange="toggl e_list_view(thi s);">
<option value="js">Java Script</option>
<option value="wb">Web Ressources</option>
</select>
</form>
<div id="js_list">
here put your js-links
</div>
<div id="ws_list" style="display: none;">
here put your web-res-links
</div>
</body>
[/HTML]
hope that may be of help to you ...

kind regards

**ikilldeath** · Jul 12 '07, 10:32 PM

That really helped me to some extent, if i know the number of options at run time, how can i do it, is there any way to pass them to the toggle function as i cant create the var view in such case.

Regards,
Siva

**ikilldeath** · Jul 12 '07, 10:37 PM

For eg:

<tr >
<td >
<select name="DropForm" property="DropI D" value="${DropFo rm.DropID}" onchange='toggl e(this);'>
<c:forEach var="drop" items="${drops} ">
<option id="dropheader " value="${drop.D ropID}"><c:out value="${drop.d ropName}"/></option>
<div id = "dropinglis t" >
<c:forEach var="lst" items="${drop.d ropLists}">
<li><a href=SetupDropL ist?listID=<c:o ut value="${lst.dr opListID}"/>><c:out value="${lst.dr opListName}"/></a></li>
</c:forEach>
</div>
</c:forEach>
</select>
</td>
</tr>

**gits** · Jul 13 '07, 08:20 AM

hmmm ... in this case you may create the list-divs with ids corresponding to your selection-values, lets say js -> js_list. then you need an additional function that creates your var list_view ... it retrieves all options gets its values and does something like this:

[CODE=javascript]var list_view = {};

for (var i == 0; i < option_list.len gth; i++) {
var opt_id = option_list[i].value;

list_view[opt_id] = opt_id + '_list';
}

return list_view;[/CODE]

kind regards

**ikilldeath** · Jul 17 '07, 01:53 PM

That was great, it helped me exactly in what i was searching for. However i also want to create a cookie for these values so that they remain even after a refresh of the page. Again i have no idea of creating a cookie. Please advise

**ikilldeath** · Jul 17 '07, 06:07 PM

Someone help me please

**gits** · Jul 17 '07, 06:11 PM

Originally posted by ikilldeath

Someone help me please

have a look at the following link ... may be its of some help to you ;)

cookies on quirksmode

kind regards

**ikilldeath** · Jul 19 '07, 05:14 PM

This is my code

[CODE=javascript]if(typeof foldinglist[openresults[i]] != 'undefined')

<tr >
<td bordercolor=#FF FFFF>
<form>
<select name="OptForm" onchange='toggl e_list_view(thi s);'>
<option value="<c:out value=""/>" selected><c:out value=""/></option>
<c:forEach var="opt" items="${option s}">
<option value="<c:out value="${opt.op tionID}"/>" ><c:out value="${opt.op tionName}"/></option>
</c:forEach>
</select>
</form>
<div id = "_id" style="display: none;"></div>
<c:forEach var="opt" items="${option s}">
<div id = "<c:out value="${opt.op tionID}"/>_id" style="display: none;">
<c:forEach var="lst" items="${opt.op tLists}">
<li><a href=SetupOptLi st?listID=<c:ou t value="${lst.op tListID}"/>><c:out value="${lst.op tListName}"/></a></li>
</c:forEach>
</div>
</c:forEach>
</td>
</tr>

function toggle_list_vie w(selection) {
var val = selection.value ;
var view = {};
for (var i = 0; i < document.getEle mentById("OptFo rm").options.le ngth; i++) {
var opt_id = document.getEle mentById("OptFo rm").options[i].value;

view[opt_id] = opt_id + '_id';
}

for (var i in view) {
var list_view = document.getEle mentById(view[i]);
list_view.style .display = i == val ? 'block' : 'none';
}
}

<!--
var cookiename="opt ion_cookies"

function get_cookie(Name )
{
prompt(Name,'') ;
//Get cookie routine by Shelley Powers
var search = Name + "="
var returnvalue = "";

if (document.cooki e.length > 0)
{
offset = document.cookie .indexOf(search )
// if cookie exists
if (offset != -1)
{
offset += search.length
// set index of beginning of value
end = document.cookie .indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie .length;

returnvalue=une scape(document. cookie.substrin g(offset, end))

}
}
return returnvalue;
}

var foldinglist=new Array()
var c=0

if(ie4)
{
for (i=0;i<document .getElementsByT agName("DIV").l ength;i++)
{
var optid= document.getEle mentsByTagName( "DIV")[i].id;

if (optid.indexOf( "_id")!=-1)
{
foldinglist[c]=document.getEl ementsByTagName ("DIV")[i]
c++
}
}
}

if (get_cookie(coo kiename) != '')
{
prompt("Entered If",'');
var openresults=get _cookie(cookien ame).split(" ")
prompt(cookiena me,'');

for (i=0 ; i < openresults.len gth ; i++)
{
if(ie4)
if(foldinglist[i].style.display! ='undefined')
foldinglist[openresults[i]].style.display= ''

}
}

if (ie4)
{
var nodelength=ns6? c-1:foldinglist.l ength-1

if(isNaN(nodele ngth))
{
nodelength=0
}
var nodes=new Array(nodelengt h)
var openones=''

}

function checkit()
{
for (i=0 ; i <= nodelength ; i++)
{
if ((ie4&&foldingl ist[i].style.display= =''))
{
openones=openon es + " " + i
}
}
document.cookie =cookiename+"=" +openones
}

if (ie4)
{
window.onunload =checkit
}
[/CODE]

But all the lists gets dissapeared after submit

JAVASCRIPT for Drop Down OnChange

JAVASCRIPT for Drop Down OnChange

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment