|
JavaScript - Javascript Drop Down Menus Mutliple Choice On Second Menu
Hello All,
I'm trying to find a script that would be able to do the following: The are two drop down boxes, the first one populating the second (state/county --> town) The first box is single choice, the second is multiple choice. I'm looking for a script that would be able to deal with generating the code for all possible values that could be chosen in the second drop down box. The drop down boxes are part of a form which allow people to search for educational courses within areas of a state/county. I've had a good root around the internet but am rapidly getting confused ... many thanks in advance. Si. Similar TutorialsHi, I have created a global navigation includes document. Unfortunately the drop down menus that are part of the navigation aren't working. They worked fine when they were part of the page, but now that they are separated from the page as includes the drop down menus don't appear in my test site (posted to a web server). All other content in the includes file appears and works. Any ideas? Thanks for your help. I've got a form that performs a calculation upon submit. I want it to perform a different calc depending on the choice from a drop down box in the form. Are there any examples of this? or can someone explain how i do it? thanks Hi, I've checked the boards and was unable to find something that matched the code that I have. The code basically uses radio buttons to populate results to a drop-down list depending on the radio button they choose. I'm having trouble figuring out where and how to add the redirection url for each of the value choices in the drop down. I was told something about using window.location('http://url.here') and then to populate the location parameter with the array value. Does this mean I have to redo my script or can another piece of code be added on to make it work. How do I alter my existing code? Thanks in advance for any help I can get: Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var services = new Array();
services['Tutoring'] = ['Grady', 'Holy Innocents', 'North Springs', 'Paideia', 'Riverwood', 'School Not Listed?'];
services['Recording'] = ['John Doe'];
function changechoice(choice)
{
var serviceList = services[choice];
changeSelect('service', serviceList, serviceList);
document.getElementById('service').disabled = false;
document.getElementById('service').onchange();
}
function changeservice(serviceValue)
{
document.getElementById('output').innerHTML = serviceValue;
return;
}
function changeSelect(fieldID, newValues, newOptions)
{
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
if (newValues && newOptions)
{
for (i=0; i<newValues.length; i++)
{
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}
}
}
</script>
</head>
<body>
<table width="400" align="center" colspan="2" border="0" rowspan="2">
<tr>
<td width="200" align="left">
Pick an option:
</td>
</tr>
<td width="200">
<br>
<ul>
<input type="radio" name="choice" value="Tutoring" onclick="changechoice(this.value);"> Tutoring<br />
<input type="radio" name="choice" value="Recording" onclick="changechoice(this.value);"> Recording<br />
</ul>
</td>
<br>
<td width="200" align="center" valign="top">
<br>
<select name="service" id="service" onchange="changeservice(this.value);" disabled="disabled">
<option> -- Choose an Option -- </option>
</select>
</td>
</table>
</body>
</html>
I have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign). What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list. Form: Code: <form> <input type="radio" name="website_status" value="exists"/> Exists <input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased <select name="projects"> <option></option> <option value="new_website">New Website</option> <option value="website_redesign">Website Redesign</option> </select> </form> JavaScript: [CODE] <script> window.onload = initForms; function initForms() { for (var i=0; i<document.forms.length; i++) { document.forms[i].onsubmit = function() {return validForm();} } } function validForm() { var inputarray = document.getElementsByTagName("input"); var selectarray = document.getElementsByTagName("select"); var textarea = document.getElementsByTagName("textarea"); if (inputarray[0].checked == true) { selectarray[0].remove(options[1]); return false; } </script> I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction? Okay everyone, new here, of course, and as much as I hate to be one of those people that don't really know much about a topic at hand and gratuitously seek out the help of those who do, here I am. The upshot is that it's probably something really easy to answer for those who know Javascript already. I've tried figuring this out but I'm at a loss. I can manage pretty well with CSS, messing around and playing with values to figure out what I need, but I've taken a look at the Javascript and it's completely unapproachable for me. I used a website, http://www.mycssmenu.com/ to create a really nifty dropdown menu, which has a tree structure in Javascript as well as collapse and expand buttons. The great thing is that, for those with Javascript disabled, it still fully works as a CSS drop-down menu. But I've been asked to modify it. Right now, you click and that's how things expand. But I've been asked to make it so that it will expand simply on hover.And I don't know what to do at all. Of course I know how to change the colors of the particular fields when you hover, through CSS, but to make it expand simply on hover? Think anyone can give me some pointers or a bit of help? The website in question is here Psiholog Popa Anca. Great job on the colors though, eh? Let me know! Hi guys. I have been scowering high and low for code to create a Java drop down menu bar for my site. I want it to be something like this: http://javascript-array.com/scripts/...rop_down_menu/ but want to insert pictures into it, for each heading, to create a new looking bar if thats possible. Can you do a mouseover with them also, as i currently have one set up, to change text colour (2 different images per button) but am unsure of the code. Thanks in advance. I'm sorry if this question might have already been posted before, but as I do not know how to go about phrasing the questions(due to low calibre in technical terms), I could not do any search about it. Basically what I intended to do is to add a *drop down list* to the header looking something like this http://www.w3schools.com/DHTML/tryit...rydhtml_menu10 except for the fact that the header(the Tutorials, Scripting, Validation coloured in pink) isn't coded using .html but .js(in this website, its coded in html as shown below). <html> <head> <style> body{font-family:arial;} table{font-size:80%;background:black} a{color:black;text-decoration:none;font:bold} a:hover{color:#606060} td.menu{background:lightblue} table.menu { font-size:100%; position:absolute; visibility:hidden; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head> <body> <h3>Drop down menu</h3> <table width="100%"> <tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="/default.asp">Tutorials</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr> </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')"> <a href="/default.asp">Scripting</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr> <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr> <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr> <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr> <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr> </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')"> <a href="/site/site_validate.asp">Validation</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr> </table> </td> </tr> </table> <p>Mouse over these options to see the drop down menus</p> </body> </html> So how can I code this in .js instead of .html? I really need a clue on how to get started on coding this as this is totally new to me, hope that anyone would appreciate helping me and I will be grateful about it. Hi everyone, How can I achieve this? I need to get my drop down menu go over the javascript slideshow going on in this page: www.kimikal.com/store It works on all browsers except for IE, which hides the menu behind the js slideshow. Any help would be greatly appreciated! I am trying to create 2 different drop down menus which are chained. First drop down menu: options 1, 2, 3, and 4 Second drop down menu: options 1, 2, 3 and 4 However for the first drop down menu, if you choose the number then that number cannot be selected again on the second drop down menu. So if i pick 4 on the first drop down. then only 1, 2, and 3 should show up on the second drop down OR if you pick 4 on the second drop down it gives you an error saying you selected that value. Here is the complicated part that I cannot figure out. I want each drop down menus on two different pages and not on the same page. So after you select the submit button on the first drop down it should go to another page with the second drop down.. Has anyone seen this before. if you can give me some tips or show me how its done or even a webpage that has already implemented this i would appreciate it. Thank you! I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it). It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it. hi im new to scripting so apologies if this is a basic question. I have a form which has javascript validation which triggers hidden divs if certain input boxes are left blank. I have it working with text fields and text areas, but im having trouble with a drop down menu. This is the code for my drop down: Code: <select name="department" size="1" id="department"> <option value="" selected>Please select</option> <option value="1">Personal Injury</option> <option value="2">ULR & Credit Hire</option> <option value="3">Consumer Credit</option> <option value="4">Health & Safety</option> <option value="5">Property</option> </select> And this is the code currently for the Javascript validating: Code: if(department.selectedIndex == 0){
var error = true;
$('#department_error').fadeIn(500);
}else{
$('#department_error').fadeOut(500);
If i leave the drop down on the 'Please Select' value, the error message should show, but at the moment it doesnt show up. I have a feeling the syntax is wrong in the javascript? Any help very much appreciated Thanks Hi guys, I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is .... I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead. Here is my code: Javascript Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
HTML Code: <div id="menuPadding"> <div id="menu"> <ul id="nav"> <li id="m1"><a href="">HOME</a></li> <li id="m2">ABOUT US <ul> <li><a href="">Our Values</a></li> <li><a href="">Facilities</a></li> <li><a href="">Arena</a></li> <li><a href="">Jobs</a></li> </ul> </li> <li id="m3">SUCCESS <ul> <li><a href="">Jobs</a></li> <li><a href="">Results</a></li> <li><a href="">Awards</a></li> <li><a href="">Testimonials</a></li> </ul> </li> </div> </div> CSS Code: #menu {
margin-top: 16px;
width: 879px;
height: 30px;
z-index: 1000;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
font-weight:bold;
}
#menuPadding {
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
text-align:center;
z-index: 1000;
}
#menuPadding ul {
height: 29px;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
z-index: 1000;
}
#menuPadding ul li {
/* display: inline;*/
line-height: 29px;
padding:0px;
margin-left:1px;
display:block;
float:left;
font-weight:bold;
color:#fff;
z-index: 1000;
}
#menuPadding ul li a {
text-align:center;
z-index: 1000;
}
#menuPadding ul li li {
padding:0px;
margin:0px;
z-index: 1000;
}
#menuPadding ul li li a {
text-align:left;
padding-left:14px;
text-transform:uppercase;
z-index: 1000;
font-size:90%;
}
#menuPadding ul li li a.notupper {
text-transform:none;
z-index: 1000;
}
/* coloured menus */
#menuPadding ul li#m1 {
background:#FF0000;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m1 li {
background:#FF0000;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m2 {
background:#0099CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m2 li {
background:#0099CC;
width:166px;
z-index: 1000;
}
#menuPadding ul li#m2 li a {
width:166px;
z-index: 1000;
}
#menuPadding ul li#m3 {
background:#999999;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m3 li {
background:#999999;
width:176px;
z-index: 1000;
}
#menuPadding ul li#m3 li a {
width:176px;
z-index: 1000;
}
#menuPadding ul li#m4 {
background:#9966CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m4 li {
background:#9966CC;
width:156px;
z-index: 1000;
}
#menuPadding ul li#m4 li a {
width:156px;
z-index: 1000;
}
#menuPadding ul li#m5 {
background:#AAC619;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m5 li {
background:#AAC619;
width:230px;
padding-right:20px;
z-index: 1000;
}
#menuPadding ul li#m5 li a {
width:230px;
z-index: 1000;
}
#menuPadding ul li#m6 {
background:#FF9900;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m6 li {
background:#FF9900;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m7 {
background:#FF0099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m7 li {
background:#FF0099;
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li a {
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li li {
font-size:87%;
z-index: 1000;
}
#menu li ul ul { /* third-and-above-level lists */
margin: -30px 0 0 216px;
z-index: 1000;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
z-index: 1000;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
z-index: 1000;
}
#menuPadding ul li#m8 {
background:#660099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m8 li {
background:#660099;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m9 {
background:#A80017;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m9 li {
background:#A80017;
width:146px;
z-index: 1000;
}
#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
color:#fff;
z-index: 1000;
}
#menuPadding ul li a:hover {
color:#000;
z-index: 1000;
}
/* suckerfish */
#menu, #menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;color:#fff;
}
#menu a {
display: block;
width: 96px;
}
#menu li { /* all list items */
float: left;
width: 96px; /* width needed or else Opera goes nuts */
border-top:1px solid #fff;
}
#menu li ul { /* second-level lists */
position: absolute;
background: orange;
width: 106px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
font-size:90%;
}
#menu li ul ul { /* third-and-above-level lists */
/* margin: -1em 0 0 96px;*/
font-size:110%;
}
#menu li li {
font-size:100%;
color:#fff;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated! Thanks in advance! I am trying to create a drop down menu for dates that starts with today's date, but allows people to choose 50 years into the past and 10 years into the future. Here's what I have for the years: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<h4>Select a date to see the energies for that day
<script type="text/javascript">
var mesparaluna=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(mesparaluna, diaparaluna, axxa1){
var today=new Date()
var mesparaluna=document.getElementById(mesparaluna)
var diaparaluna=document.getElementById(diaparaluna)
var axxa1=document.getElementById(axxa1)
for (var i=0; i<31; i++)
diaparaluna.options[i]=new Option(i, i+1)
diaparaluna.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
mesparaluna.options[m]=new Option(mesparaluna[m], mesparaluna[m]+1)
mesparaluna.options[today.getMonth()]=new Option(today.getMonth(), today.getMonth(), true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
axxa1.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
axxa1.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
<script>
sacakindias()
</script>
<SCRIPT SRC=tzolkin.js></script>
<script>
armatzolkin()
</script>
<p><font size="2" face="Verdana">
<SELECT class="input_tex" name=mesparaluna id="mesparaluna"></SELECT> </font>
<SELECT class="input_tex" name="diaparaluna" id="diaparaluna"></SELECT> </font>
<SELECT class="input_tex" name="axxa1" id="axxa1"></SELECT></p>
<p><INPUT class="input_tex" onclick="sacakinpersonal()" type="button" value="Search"><img border="0" name="pirav" src="blanco.gif" class="shakeimage" width="10" height="10">
<INPUT class="input_tex" onclick="sacakindias()" type="button" value="Today"></p></form>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("diaparaluna", "mesparaluna", "axxa1")
}
</script>
</h4>
</body>
</html>
I am also having a problem with the month. I wanted it to show the name of the month, but I am getting a number (and a wrong one at that). Apologies... I am a terrible newbie with Javascript. Hello! My first (but surely not last) post on this forum. I made a drop box menu and I want to activate specific javascript functions when they are selected. I think this should be fairly easy to solve. I am very new at HTML and Javascript btw. This is what I tried: if (document.getElementById("selectense").value="present"){ document.getElementById("present").style.visibility="visible"; } <span class="tensebox"> <select id="selectense"> <option onclick="showPresent()">Present</option> <option onclick="showPC()">Present</option> </select></span> (and I have some text with the ID "present) Hey, so I'm a complete javascript newbie and am trying to create a drop down menu with four different boxes. The site I'm working on is basically an ecommerce site, so I'll use cars as a good example for what I want to do. Let's say that I'm selling cars and want to target the buyer directly, then I would have the following boxes, each one serving as a dependent of the one before it: 1. Pick the brand (BMW, Mercedes, Etc.) 2. Pick the type of car (Sports car, SUV, Mini Van, etc.) 3. Pick the color (blue, green, etc.) 4. Pick the price ($0-$19,999/$19,999-29,999/etc.) So far I have the first two boxes down by using the following site: http://www.supertom.com/menugen/. Now my problem is that the site only allows for the first two boxes to be made, and says that "the values in box1 are static and printed directly as normal HTML. The corresponding box2 options will also be copied into the HTML as well as the javascript for full functionality." Being a complete newbie, I have no idea what this means. So I decided to search the internet for an answer and was not able to find one, thus leading me here, which from the looks of it seems like a great forum. If anyone could tell me how to connect a third and fourth box that falls into the same hierarchy as the first and the second then I would appreciate. Really THANK YOU, and I'm really looking forward to reading your replies!! -Bobby Hi All, Hope someone can help me with this. I have been using a free javascript code to make some drop-down menus. this is the link for the code on dynamic drive. http://www.dynamicdrive.com/dynamici...anylinkcss.htm The script works fine and I have been using it for a while now. However, one of the websites that I run has just asked me to include a sub menu on one of the menu items. I have managed to get the sub menu to show as requested by using the normal drop down menu and adding a Quote: rev="lr" and giving it another class and rel. However, When the link is hovered over the menu appears to the side as expected but when you move onto that "sub-menu" the original menu disappears. can anyone suggest what changes I would need to make so that the first menu does not disappear? Any help would be greatly appreciated. As you can tell I am new to JavaScript (hence the use of free codes) Hello! I am currently using this code on a webpage that lists the site members. Code: function toggleMenu(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')?'none': 'block';
}[
For some reason, and maybe this is the function of it (I am not sure,) when you click 'characters' on the tables lower down on the page, you are sent to the top of the page again. Here is the page in question, if it's necessary: http://oursideofthemountain.webs.com/members.htm Any help in this matter would be greatly appreciated! I am very new to Javascript, so please be patient with me! I'm currently looking to revamp the Link Exchange section on my website. Rather than clutter it with banners, I am going to put all the links into a drop down menu, with the banner for the selected site under it. The intention is that when you select a site from the list, the banner underneath changes. However, I can only get it to do this once, then it simply refuses to let you select anything else. This is the code I am using to change it: Code: function defineimage()
{
if (document.forms[0].gourl.value = "http://jeff.zhomg.com")
{
document.images.linkimage.src = '/images/exchange/jeff.gif'
}
else if (document.forms[0].gourl.value = "http://www.strangedrawingsartgallery.com")
{
document.images.linkimage.src = '/images/exchange/SCH.jpg'
}
}
And this is my drop down menu, and the image I'd like to change: Code: <p><select name="gourl" onChange="defineimage()"> <option value="http://www.strangedrawingsartgallery.com" selected>Strange City Heroes</option> <option value="http://jeff.zhomg.com">Invincible Jeff</option> </select> <input type="submit" name="Submit" value="Go to Site" onClick="dropdown()"></p><p><img src="/images/exchange/SCH.jpg" alt="SCH" name="linkimage" width="468" height="60" border="0" id="linkimage"></p> If you are unsure what I mean by this, you can see for yourself by going to the page in question and selecting 'Invincible Jeff' from the list. The banner will change, but you won't be able to change the selection again. Many thanks (again) for the help. Hi, I am trying to use JavaScript for several linked drop down menus. The contents of the first drop down menu is defined in the code of the form, however, I do not know the best way to populate the following drop down menus depending on the selection of the previous. I have something working with the following JavaScript code, however as there are lots of options I am not sure whether this is the best way of doing this. Code: <script type="text/javascript">
function setYear(chosen, selbox) {
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select a year',' ');
setTimeout(setYear(' ',document.question.subject),5);
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new
Option('exam1','11');
selbox.options[selbox.options.length] = new
Option('exam2','12');
selbox.options[selbox.options.length] = new
Option('exam3','13');
selbox.options[selbox.options.length] = new
Option('exam4','14');
selbox.options[selbox.options.length] = new
Option('exam5','15');
setTimeout(setYear('11',document.question.subject),5);
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new
Option('exam6','twoone');
selbox.options[selbox.options.length] = new
Option('exam7','twotwo');
selbox.options[selbox.options.length] = new
Option('exam8','twothree');
selbox.options[selbox.options.length] = new
Option('exam8','twofour');
selbox.options[selbox.options.length] = new
Option('exam9','twofive');
selbox.options[selbox.options.length] = new
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new
Option('exam10','threeone');
selbox.options[selbox.options.length] = new
Option('exam11','threetwo');
selbox.options[selbox.options.length] = new
Option('exam12','threethree');
selbox.options[selbox.options.length] = new
}
if (chosen == "11") {
selbox.options[selbox.options.length] = new
Option('subject1','111');
}
}
</script>
This is what I have in the form: Code:
<td>Minimum DBS Year: </td><td colspan="2">
<select name="DBSyear" onchange="setYear(document.question.DBSyear.options
[document.question.DBSyear.selectedIndex].value,
document.question.exam);">
<option value=" " selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</tr>
<tr>
<td>
Exam Paper:
</td>
<td>
<select name="exam" onchange="setYear(document.question.exam.options
[document.question.exam.selectedIndex].value,
document.question.subject);">
<option value=" " selected="selected">Please select a year</option>
</select>
</td>
</tr>
<tr>
<td>
Subject:
</td>
<td>
<select name="subject" size="1">
<option value=" " selected="selected">Please select an exam</option>
</select>
</td>
</tr>
How would I populate the drop down menus from tables in the database and filter the options depending on the previous drop down selection?? I would appreciate any help! hey guys, happy new year! , I was wondering how to calculate an outcome/number through a combination of 4 drop down menus (drop down menu's 1 and 2 combine to form a specific value and menu's 3 and 4 combine to form a specific value), example ; 1st drop down menu (1*) = a,b,c,d,e 2nd drop down menu (2*) = 5,4,3,2,1 3rd drop down menu (3*)= a,b,c,d,e 4th drop down menu (4*)= 5,4,3,2,1 Example of drop down menu layout - View image: example a->e = low to high (value) predominant value so b5>a1 ; d5>c1 5->1 = low to high (value) Then the calculation involves the 1st and 2nd menu to form 1 value, so c3, e4 etc and the 3rd and 4th menu unite to form 1 value that is different from the first; c2, e3 So (1*2*) b3 ; (3*4*) b1 = x value Also the value from 1*2* menu must be lower than value from menu 3*4*; so you cannot input 1*2* c4 ; 3*4* c5 /or b1 (so once the first menu is selected, the 3rd and 4th menu's wont show anything lower) I am not sure the best way about going to calculate the value for x (generated from the menu combinations) however I can outline the values for each combination as it involves simple addition; Example; 1*2* c5 ; 3*4* c4 = 39 Example; 1*2* c4 ; 3*4* c3 = 43 Example; 1*2* c3 ; 3*4* c2 = 44 Example; 1*2* c2 ; 3*4* c1 = 49 Therefore 1*2* c5 ; 3*4* c1 = 175 (c5>c4 + c4>c3 + c3>c2 + c2>c1 = 175) Starting from a5 to e1 the values are as follows; [(a5->a4 = 17),17,17,17],[(a1->b5 = 22.5),22.5,22.5,22.5],[39.6,39.6,43,44],[49,56.7,56.7,60],[69,76.5,90,161],[189.5,216,(e2->e1 = 246.5),no further value (no f5)] If you could help me out that would be amazing, appreciate any help/feedback in advance! |
|||||||