JAVASCRIPT for Drop Down OnChange

Hi,

I am very much new to JavaScript. Please, can anyone help in resolving this issue.

Here in the example
http://www.javascriptkit.com/script/script2/flipmenu.shtml
There are two folders: JavaScript Resources and Web Resources.

I want them to be options for drop down, and depending on the selection the corresponding lists should b displayed down, like if i select JavaScript from the drop down.
All the links like JavaScript kit, Free JavaScripts...etc should be displed down to the drop down.

Is it possible.

Regards,
Siva

Jul 12 '07 #1

Subscribe Post Reply

3558

gits

5,390

Expert Mod 4TB

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

Jul 12 '07 #2

ikilldeath

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

Jul 12 '07 #3

gits

5,390

Expert Mod 4TB

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

Jul 12 '07 #4

ikilldeath

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

Jul 12 '07 #5

ikilldeath

<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%"><div class="pagetitle">Online Check List</div><div class="pagetitle2">Task List - <script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thu rsday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","A ug","Sep","Oct","Nov","Dec")
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"><div 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:absolute;
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:absolute;
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:absolute;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
/* NAVIGATION */
.nav {
position:relative;
text-align:left;
width:100%;
font-weight:bold;
background-image: url(../images/gradient_bar_blue3.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:relative;
border:1px solid #000;
padding:7px;
margin:5px;
background-color:#FFFFCC;
left: 0px;
}
.imageBox {
position:relative;
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="JavaScript">
//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.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Ope ra")==-1

function checkcontained(e)
{
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
{
iscontained=1
}
else
{
while (ns6&&cur.parentNode||(ie4&&cur.parentElement))
{
if (cur.id=="foldheader"||cur.id=="foldinglist")
{
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
}
if (iscontained)
{
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none")
{
foldercontent.style.display=""
cur.style.listStyleImage="url(../images/folderopen.gif)"
}
else
{
foldercontent.style.display="none"
cur.style.listStyleImage="url(../images/folder.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
</script>
</head>
<body>
<form name="DepartmentForm" method="post" action="/OCL/do/UpdateNavigator;jsessionid=A303839C692DDC32AB7A736 23B68EE7B.worker1">
<div class="sidenav">
<table width="100%" border=2 bordercolor=#000000 valign="top" >
<tr>
<td class="sidenavheader"><b>DIVISION</b></td
</tr>
<tr>
<td bordercolor=#FFFFFF>Operations</td>
</tr>
<tr>
<td class="sidenavheader"><b>DEPARTMENT</b></td>
</tr>
<tr>
<td bordercolor=#FFFFFF>
<select name="departmentID" onchange="this.form.submit();"><option value="2" selected>Equities</option>
<option value="1" >Factory</option></select>
</td>
</tr>
<tr>
<td class="sidenavheader"><b>TEAMS/TASK LISTS</b></td>
</tr>
<tr>
<td bordercolor=#FFFFFF>
<ul>
<li id="foldheader">Emergings Markets & Spain</li>
<ul id="foldinglist" style="display:none">
<li><a href=SetupTaskList?listID=2>Emerging Mkts & Spain - Managers</a></li>
<li><a href=SetupTaskList?listID=3>Spain</a></li>
<li><a href=SetupTaskList?listID=4>Egypt</a></li>
<li><a href=SetupTaskList?listID=5>Poland</a></li>
<li><a href=SetupTaskList?listID=6>Turkey</a></li>
<li><a href=SetupTaskList?listID=7>Czech Republic</a></li>
<li><a href=SetupTaskList?listID=8>Hungary</a></li>
<li><a href=SetupTaskList?listID=9>Russia</a></li>
<li><a href=SetupTaskList?listID=10>South Africa</a></li>
<li><a href=SetupTaskList?listID=11>Israel</a></li>
<li><a href=SetupTaskList?listID=12>Greece</a></li>
<li><a href=SetupTaskList?listID=36>Emerging Mkts & Spain - Managers</a></li>
</ul>
<li id="foldheader">Major Euro Markets Setts</li>
<ul id="foldinglist" style="display:none">
<li><a href=SetupTaskList?listID=30>Major Euro Markets - Managers</a></li>
<li><a href=SetupTaskList?listID=31>Germany & Austria</a></li>
<li><a href=SetupTaskList?listID=32>France & Belgium</a></li>
<li><a href=SetupTaskList?listID=33>Holland, Italy & Portugal</a></li>
<li><a href=SetupTaskList?listID=34>Scandinavia</a></li>
<li><a href=SetupTaskList?listID=35>Euroclear</a></li>
<li><a href=SetupTaskList?listID=37>Euroclear AE/BQ</a></li>
</ul>
<li id="foldheader">Self Settlements</li>
<ul id="foldinglist" style="display:none">
<li><a href=SetupTaskList?listID=17>Self Settlements - Managers</a></li>
<li><a href=SetupTaskList?listID=18>Crest</a></li>
<li><a href=SetupTaskList?listID=19>Swiss</a></li>
<li><a href=SetupTaskList?listID=22>Residuals</a></li>
<li><a href=SetupTaskList?listID=24>Stamp</a></li>
</ul>
<li id="foldheader">CFG</li>
<ul id="foldinglist" style="display:none">
<li><a href=SetupTaskList?listID=20>CFG MGMT</a></li>
<li><a href=SetupTaskList?listID=21>CFG TEAM</a></li>
</ul>
<li id="foldheader">Projects</li>
<ul id="foldinglist" style="display:none">
<li><a href=SetupTaskList?listID=23>Projects General</a></li>
</ul>
<li id="foldheader">Prime Access Client Services</li>
<ul id="foldinglist" style="display:none">
<li><a href=SetupTaskList?listID=29>Daily Check List</a></li>
</ul>
</ul>
</td>
</tr>
<tr>
<td bordercolor=#FFFFFF>
<ul>
<li id="foldheader">Maintenance</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li>
<a href="/OCL/do/SetupMaintTask;jsessionid=A303839C692DDC32AB7A7362 3B68EE7B.worker1">Task</a>
</li>
<li>
<a href="/OCL/do/SetupMaintTasklist;jsessionid=A303839C692DDC32AB7A 73623B68EE7B.worker1">TaskList</a>
</li>
</ul>
</ul>
</td>
</tr>
<tr id = data2>
<td bordercolor=#FFFFFF>
<ul>
<select name="TeamID" onchange="checkmountained();"><li id="foldheader">Emergings Markets & Spain</li>
<ul id="dropinglist" >
<li><a href=SetupTaskList?listID=2>Emerging Mkts & Spain - Managers</a></li>
<li><a href=SetupTaskList?listID=3>Spain</a></li>
<li><a href=SetupTaskList?listID=4>Egypt</a></li>
<li><a href=SetupTaskList?listID=5>Poland</a></li>
<li><a href=SetupTaskList?listID=6>Turkey</a></li>
<li><a href=SetupTaskList?listID=7>Czech Republic</a></li>
<li><a href=SetupTaskList?listID=8>Hungary</a></li>
<li><a href=SetupTaskList?listID=9>Russia</a></li>
<li><a href=SetupTaskList?listID=10>South Africa</a></li>
<li><a href=SetupTaskList?listID=11>Israel</a></li>
<li><a href=SetupTaskList?listID=12>Greece</a></li>
<li><a href=SetupTaskList?listID=36>Emerging 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=SetupTaskList?listID=30>Major Euro Markets - Managers</a></li>
<li><a href=SetupTaskList?listID=31>Germany & Austria</a></li>
<li><a href=SetupTaskList?listID=32>France & Belgium</a></li>
<li><a href=SetupTaskList?listID=33>Holland, Italy & Portugal</a></li>
<li><a href=SetupTaskList?listID=34>Scandinavia</a></li>
<li><a href=SetupTaskList?listID=35>Euroclear</a></li>
<li><a href=SetupTaskList?listID=37>Euroclear 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=SetupTaskList?listID=17>Self Settlements - Managers</a></li>
<li><a href=SetupTaskList?listID=18>Crest</a></li>
<li><a href=SetupTaskList?listID=19>Swiss</a></li>
<li><a href=SetupTaskList?listID=22>Residuals</a></li>
<li><a href=SetupTaskList?listID=24>Stamp</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=SetupTaskList?listID=20>CFG MGMT</a></li>
<li><a href=SetupTaskList?listID=21>CFG 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=SetupTaskList?listID=23>Projects 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=SetupTaskList?listID=29>Daily 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

Jul 12 '07 #6

gits

5,390

Expert Mod 4TB

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_view(selection) {
var val = selection.value;
var view = {
js: 'js_list',
wb: 'ws_list'
};

for (var i in view) {
var list_view = document.getElementById(view[i]);
list_view.style.display = i == val ? 'block' : 'none';
}
}
</script>
<body>
<form>
<select id="category" onchange="toggle_list_view(this);">
<option value="js">JavaScript</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

Jul 12 '07 #7

ikilldeath

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

Jul 12 '07 #8

ikilldeath

For eg:

<tr >
<td >
<select name="DropForm" property="DropID" value="${DropForm.DropID}" onchange='toggle(this);'>
<c:forEach var="drop" items="${drops}">
<option id="dropheader" value="${drop.DropID}"><c:out value="${drop.dropName}"/></option>
<div id = "dropinglist" >
<c:forEach var="lst" items="${drop.dropLists}">
<li><a href=SetupDropList?listID=<c:out value="${lst.dropListID}"/>><c:out value="${lst.dropListName}"/></a></li>
</c:forEach>
</div>
</c:forEach>
</select>
</td>
</tr>

Jul 12 '07 #9

gits

5,390

Expert Mod 4TB

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:

Expand|Select|Wrap|Line Numbers

 var list_view = {};
 
for (var i == 0; i < option_list.length; i++) {

    var opt_id = option_list[i].value;
 
    list_view[opt_id] = opt_id + '_list';

}
 
return list_view;

kind regards

Jul 13 '07 #10

ikilldeath

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

Jul 17 '07 #11

ikilldeath

Someone help me please

Jul 17 '07 #12

gits

5,390

Expert Mod 4TB

Someone help me please

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

cookies on quirksmode

kind regards

Jul 17 '07 #13

ikilldeath

This is my code

Expand|Select|Wrap|Line Numbers

 if(typeof foldinglist[openresults[i]] != 'undefined')
 
<tr >

  <td bordercolor=#FFFFFF>

  <form>

    <select name="OptForm"  onchange='toggle_list_view(this);'>

        <option  value="<c:out value=""/>" selected><c:out value=""/></option>

    <c:forEach var="opt" items="${options}">

        <option  value="<c:out value="${opt.optionID}"/>" ><c:out value="${opt.optionName}"/></option>

    </c:forEach>

  </select>

  </form>

  <div id = "_id" style="display: none;"></div>

  <c:forEach var="opt" items="${options}">

    <div id = "<c:out value="${opt.optionID}"/>_id" style="display: none;">

     <c:forEach var="lst" items="${opt.optLists}">

       <li><a href=SetupOptList?listID=<c:out value="${lst.optListID}"/>><c:out value="${lst.optListName}"/></a></li>

      </c:forEach>

    </div>

  </c:forEach>

 </td>

</tr>
 
function toggle_list_view(selection) {

   var val  = selection.value;

  var view = {};

   for (var i = 0; i < document.getElementById("OptForm").options.length; i++) {

           var opt_id = document.getElementById("OptForm").options[i].value;
 
                view[opt_id] = opt_id + '_id';

   }
 
   for (var i in view) {

    var list_view = document.getElementById(view[i]);

    list_view.style.display = i == val ? 'block' : 'none';

    }

}
 
<!--

var cookiename="option_cookies"
 
function get_cookie(Name)

{

    prompt(Name,'');

    //Get cookie routine by Shelley Powers 

    var search = Name + "="

    var returnvalue = "";
 
    if (document.cookie.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=unescape(document.cookie.substring(offset, end))
 
        }

   }

  return returnvalue;

}
 
var foldinglist=new Array()

var c=0
 
if(ie4)

{

for (i=0;i<document.getElementsByTagName("DIV").length;i++)

    {

       var optid= document.getElementsByTagName("DIV")[i].id;
 
        if (optid.indexOf("_id")!=-1)

        {

            foldinglist[c]=document.getElementsByTagName("DIV")[i]

            c++

        }

   }

}
 
if (get_cookie(cookiename) != '')

{

    prompt("Entered If",'');

  var openresults=get_cookie(cookiename).split(" ")

  prompt(cookiename,'');
 
  for (i=0 ; i < openresults.length ; i++)

  {

    if(ie4)

      if(foldinglist[i].style.display!='undefined')

       foldinglist[openresults[i]].style.display=''
 
   }

}
 
if (ie4)

{

    var nodelength=ns6?c-1:foldinglist.length-1
 
    if(isNaN(nodelength))

    {

        nodelength=0

    }

    var nodes=new Array(nodelength)

    var openones=''
 
}
 
function checkit()

{

  for (i=0 ; i <= nodelength ; i++)

  {

    if ((ie4&&foldinglist[i].style.display==''))

    {

         openones=openones + " " + i

    }

  }

  document.cookie=cookiename+"="+openones

}
 
if (ie4)

{

    window.onunload=checkit

}

But all the lists gets dissapeared after submit

Jul 19 '07 #14

JAVASCRIPT for Drop Down OnChange

Similar topics