|
JavaScript - Three Level Connected Boxes
Is there a way add another dropdown form to this script?
http://javascript.internet.com/navig...-comboxes.html Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made... Thanks in advance... Similar TutorialsI'm looking for four level connected drop down boxes. Unlike all the scripts I have seen on the internet I need all the options to be available if nothing is selected in the previous drop down. So I want something like combination of connected drop downs and ordinary drop down. If the selection is made, display appropriate options in other drop downs... Hope I'm clear... Ex: If I had three properties in Spain, ----------------------------------------------------------------------------------------------------------- | -------- Country: Spain --------- | -------- Country: Spain --------- | -------- Country: Spain ---------- | | -------- State: Andalusia ------- | -------- State: Andalusia -------- | -------- State: Catalonia --------- | | -------- District: Malaga -------- | -------- District: Granada ------- | -------- District: Barcelona ------- | | -------- Town: Marbella --------- | -------- Town: Motril ----------- | --------- Town: Badalona -------- | ----------------------------------------------------------------------------------------------------------- it should show me all the list of available locations, but when I choose Andalusia, it would only show two rest locations – Malaga and Granada, and the same rule when choosing district – Malaga->Marbella Can anyone please help? I need it very much... Thanks in advance! Hi, I use this javascript to create connected dropdown boxes on my website, but I have some problems. Look at the demonstration: http://javascript.internet.com/navig...-comboxes.html (The code is below) as you see the first box starts with [ Type ] and the second [ style ]. I need to make them disabled somehow (or remove at all) to prevent its selection. I compare the data from the boxes with an empty value to prevent form submission if one of the two boxes is empty and when this [ Type ] or [ style ] is selected it thinks that the selection has been made. How can I solve this problem? Thanks I found this perfect javascript for creating dynamic connected drop down boxes. This script works fine but there is just one thing I want to add but unfortunately I'm not familiar with javascript enough... I want to display small images when an item is selected from the second drop down. An image should be assigned somehow to each selection from the right hand drop down menu in the code and when someone selects something from the list, an image should be displayed next to it automatically. Can anyone please amend this script for me if this isn't too difficult? Code: <!-- ONE STEP TO INSTALL CONNECTED COMBOXES:
1. Copy the coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the BODY of your HTML document -->
<BODY>
<!-- Original: Mikayel Muradyan (mikam@freenet.am) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// Initialize class for Type and Style
function Type(id, type){
this.id = id;
this.type = type;
}
function Style(id, id_type, style){
this.id = id;
this.id_type = id_type;
this.style = style;
}
// Initialize Array's Data for Type and Style
TypeArray = new Array(
new Type(1, "Apparel"),
new Type(2, "Shoes"),
new Type(5, "Accessories")
);
StyleArray = new Array(
new Style(4, 1, "Apparel_1"),
new Style(7, 1, "Apparel_2"),
new Style(41, 2, "Shoes_3"),
new Style(21, 2, "Shoes_4"),
new Style(17, 2, "Shoes_2"),
new Style(30, 5, "Accessories_3"),
new Style(27, 5, "Accessories_4"),
new Style(31, 5, "Accessories_3")
);
function init(sel_type, sel_style){
document.product.id_type.options[0] = new Option("[ Type ]");
document.product.id_style.options[0] = new Option("[ Style ]");
for(i = 1; i <= TypeArray.length; i++){
document.product.id_type.options[i] = new Option(TypeArray[i-1].type, TypeArray[i-1].id);
if(TypeArray[i-1].id == sel_type)
document.product.id_type.options[i].selected = true;
}
OnChange(sel_style);
}
function OnChange(sel_style){
sel_type_index = document.product.id_type.selectedIndex;
sel_type_value = parseInt(document.product.id_type[sel_type_index].value);
for(i = document.product.id_style.length - 1; i > 0; i--)
document.product.id_style.options[i] = null;
j=1;
for(i = 1; i <= StyleArray.length; i++){
if(StyleArray[i-1].id_type == sel_type_value){
document.product.id_style.options[j] = new Option(StyleArray[i-1].style, StyleArray[i-1].id);
if(StyleArray[i-1].id == sel_style) document.product.id_style.options[j].selected = true;
j++;
}
}
}
//-->
</SCRIPT>
<form name="product">
<select name="id_type" size="1" style="width: 150px;" onChange="OnChange()">
</select>
<select name="id_style" size="1" style="width: 150px;">
</select>
</form>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// init(5, 31); // Initialize comboboxes by selected sel_type and sel_style
init(); // Default initialize comboboxes for Type and Style
//-->
</SCRIPT>
Thanks in advance! I have a problem with programming in JS the following; first part of the problem: In the middle of the site would be a short text (some kind of quote) which you could refresh simply by clicking on a button bellow text (in this case a new quote would appear in the text box) or you could agree with the quote by clicking on second button bellow the code (in this case there would appear a smiley face in the text box). Quotes would be randomly selected from the database. second part of the problem: I also wish to record whether or not people agree with the quote. I was suggested to use server side language like PHP or ASP to write the results to a file or database on the server. Honestly I have absolutely no idea how to do this. I am familiar with basic HTML but JS is a whole new planet for me. I have spend days trying to figure out the solution but still don't know what to do which is why any sort of help would be greatly appreciated. Thanks in advance Hey everyone, I need some help with a function. I'm using ajax to grab a response from a PHP page, on success, the ajax sets a variable. After the line that calls the ajax function is the line the returns the variable (a global variable). Problem is, because the variable is returned right after the ajax function is fired, it doesn't give the ajax enough time to set the variable. The work around I've thought about would be using the ajax function as a variable, and returning that variable in the initial return line. Could anyone either help me with a better solution, or tell me what I'm doing wrong? Here's some code for reference: The function that will return the response I'm trying to collect: Code: function lt_ajaxGet(hash) {
var params = "hash=" + escape(encodeURI(hash));
makePOSTRequest('hash.php?get', params);
return ajax_response;
}
The ajax code: Code: if(http_request.status == 200){
ajax_response = http_request.responseText;
}
Resolved.
Hi, I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction? http://www.javascriptkit.com/script/...icalmenu.shtml Thanks! Rob Hi There. I've been reading this forum for quite sometime, but today is my first post, hope you guys can help. Here is how the code works: (its like a phone directory) -User first selects the dept. -Once selected, a second drop down populates with the names of each person in that department. -I want the contact info to show on the page once they select this last step. I need for when the user selects this second options for a link to open inside a iFrame inside of the same html page. I uploaded the file here for you to see: www.pioneer-energy.us/tf2/contact-us.html Here is the code for the HTML doc: Code: <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();"> <FORM name="drop_list" action="yourpage.php" method="POST" > <SELECT NAME="Department" onChange="SelectSubCat();" > <Option value="">Select Department</option> </SELECT> <SELECT id="SubCat" NAME="SubCat"> <Option value="">SubCat</option> </SELECT> </form> Here is the .js file code Code: function fillCategory(){
// this function is used to fill the category list on load
addOption(document.drop_list.Department, "Executive-Management", "Executive Management");
addOption(document.drop_list.Department, "Marketing", "Marketing", "");
addOption(document.drop_list.Department, "Annuities", "Annuities", "");
addOption(document.drop_list.Department, "Underwriting/Case Management", "Underwriting/Case Management", "");
addOption(document.drop_list.Department, "Human Resources", "Human Resources", "");
addOption(document.drop_list.Department, "Commissions", "Commissions", "");
addOption(document.drop_list.Department, "Policy Owner Services", "Policy Owner Services", "");
addOption(document.drop_list.Department, "Information Technology", "Information Technology", "");
addOption(document.drop_list.Department, "APS", "APS", "");
}
function SelectSubCat(){
// ON selection of category this function will work
removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");
if(document.drop_list.Department.value == 'Executive-Management'){
addOption(document.drop_list.SubCat,"MartyGreenberg", "Marty Greenberg - President");
addOption(document.drop_list.SubCat,"LisaGreenberg ", "Lisa Greenberg - Vice President");
addOption(document.drop_list.SubCat,"CraigBrown", "Craig Brown - CFO");
addOption(document.drop_list.SubCat,"RitaBogan", "Rita Bogan - Executive Secretary & Case Management");
addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager");
}
if(document.drop_list.Department.value == 'Marketing'){
addOption(document.drop_list.SubCat,"RonBielefelt", "Ron Bielefelt - Chief Marketing Officer");
addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager");
addOption(document.drop_list.SubCat,"MarkRBugli", "Mark R. Bugli - CLU, ChFC ");
addOption(document.drop_list.SubCat,"HowardMandel", "Howard Mandel - Director of Business Development");
addOption(document.drop_list.SubCat,"DeborahSanchez", "Deborah Sanchez - Brokerage Supervisor ");
addOption(document.drop_list.SubCat,"SylviaMariscal", "Sylvia Mariscal - Life Settlements");
addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager");
addOption(document.drop_list.SubCat,"JosephTanner", "Joseph Tanner - Brokerage Manager Assistant", "");
}
if(document.drop_list.Department.value == 'Annuities'){
addOption(document.drop_list.SubCat,"SethMoses", "Seth Moses - Director of Annuities");
addOption(document.drop_list.SubCat,"SteveAvila", "Steve Avila - Assistant to Seth Moses");
}
if(document.drop_list.Department.value == 'Underwriting/Case Management'){
addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager");
addOption(document.drop_list.SubCat,"KimberlyFleming", "Kimberly Fleming - Case Manager ");
addOption(document.drop_list.SubCat,"LarissaBurton", "Larissa Burton - Case Manager Assistant to Kimberly Fleming");
addOption(document.drop_list.SubCat,"MariaAntebi", "Maria Antebi - Case Manager");
addOption(document.drop_list.SubCat,"LilianaGalvan", "Liliana Galvan - Case Manager");
addOption(document.drop_list.SubCat,"KimberlyKoontz", "Kimberly Koontz - Case Manager Assistant to Liliana Galvan");
addOption(document.drop_list.SubCat,"ChastaSpikes", "Chasta Spikes - Case Manager");
addOption(document.drop_list.SubCat,"SylviaMarsicalShank", "Sylvia Marsical-Shank - Case Manager");
addOption(document.drop_list.SubCat,"TriciaRomain ", "Tricia Romain - Case Manager");
addOption(document.drop_list.SubCat,"BetoRuiz", "Beto Ruiz - Case Manager");
addOption(document.drop_list.SubCat,"DavidGarcia", "David Garcia - Case Manager Assistant");
}
if(document.drop_list.Department.value == 'Human Resources'){
addOption(document.drop_list.SubCat,"MarieOkamura", "Marie Okamura - Human Resources Director");
}
if(document.drop_list.Department.value == 'Commissions'){
addOption(document.drop_list.SubCat,"WalterHelbig", "Walter Helbig, FLMI - Licensing");
addOption(document.drop_list.SubCat,"KenFong", "Ken Fong - Licensing");
addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Commissions");
}
if(document.drop_list.Department.value == 'Licensing'){
addOption(document.drop_list.SubCat,"TessSlezak ", "Tess Slezak - Licensing");
addOption(document.drop_list.SubCat,"ArleneAuerhan ", "ArleneAuerhan - Licensing");
addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Forms & Supplies");
}
if(document.drop_list.Department.value == 'Policy Owner Services'){
addOption(document.drop_list.SubCat,"LanTran", "Lan Tran - Policy Services");
addOption(document.drop_list.SubCat,"GianSanchez ", "Gian Sanchez - Receptionist");
addOption(document.drop_list.SubCat,"ArmonTodd ", "Armon Todd - Office Support");
}
if(document.drop_list.Department.value == 'Information Technology'){
addOption(document.drop_list.SubCat,"HenryCholakyan ", "Henry Cholakyan - IT Director");
}
if(document.drop_list.Department.value == 'APS'){
addOption(document.drop_list.SubCat,"CarmenAllen ", "Carmen Allen - APS Supervisor");
}
}
//////////////////
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
Thanks for any help in advanced! Hi i am working on a website project.. in which i have like.. for the menu.. i have a horizontal menu.. with three tabs for eg... Home , about us, contact us and.. when i click on the Home tab, i need a horizontal submenu with four or five links.. say for eg : menu1,menu2,menu3,menu4,menu4 and menu5 and when i click on menu1 i need a vertical menu on click of of menu1. so i need two horizontal menu and one vertical menu. i have attached a sample image of my menu. please have a look. Can i do this in javascript.. I need to do this using html , css or jquery.. How do i ... Please help me I have a working code of 2 level horizontal tab menu....it is now onmouse over ,I want to convert it to onclick....can anyone help in this regard.. I have taken from.... http://www.javascriptkit.com/script/...leveltab.shtml The javascript.... Code: var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}
function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}
function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}
function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}
function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}
Ok so i am trying to make 3 dropdowns based off a mysql table. and the 3 dropdowns need to be based off of the previous dropdown. i.e Source, School, Sub. Select Source, and the schools in dropdown 2 are based off of the source they selected, and when they select a school, all the sub cats for that school are in the sub category dropdown. It seems like a simple concept, but i've google'd EVERYWHERE and notihng. I have the 3 dropdown's pulling from my database perfectly. i just cannot base the next dropdown on the previous selection! I know nothing of javascript..im a front end designer with little php/mysql. I've read that Ajax is the way to go, so here i am ! any tutotials, links or sample script layouts i can use would be amazing! Thank you! jt Hello, this is my very first post, and I hope to get some help, . Please dont take this as a code dump. The following script is a working script,, Which correctly displays a 2 level chain-linked select box My problem is I need to make a third box which option VALUE will be the same as the option CLASS of its parent item in the second box. Any pointers? PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Unobtrusive dynamic select boxes | Single dynamic selectbox example</title> <script type="text/javascript"> function dynamicSelect(id1, id2) { // Feature test to see if there is enough W3C DOM support if (document.getElementById && document.getElementsByTagName) { // Obtain references to both select boxes var sel1 = document.getElementById(id1); var sel2 = document.getElementById(id2); // Clone the dynamic select box var clone = sel2.cloneNode(true); // Obtain references to all cloned options var clonedOptions = clone.getElementsByTagName("option"); // Onload init: call a generic function to display the related options in the dynamic select box refreshDynamicSelectOptions(sel1, sel2, clonedOptions); // Onchange of the main select box: call a generic function to display the related options in the dynamic select box sel1.onchange = function() { refreshDynamicSelectOptions(sel1, sel2, clonedOptions); }; } } function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) { // Delete all options of the dynamic select box while (sel2.options.length) { sel2.remove(0); } // Create regular expression objects for "select" and the value of the selected option of the main select box as class names var pattern1 = /( |^)(select)( |$)/; var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)"); // Iterate through all cloned options for (var i = 0; i < clonedOptions.length; i++) { // If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) { // Clone the option from the hidden option pool and append it to the dynamic select box sel2.appendChild(clonedOptions[i].cloneNode(true)); } } } </script> <script type="text/javascript"> window.onload = function() { dynamicSelect("pda-brand", "pda-type"); } </script> </head> <body> <form action="#"> <div> <select id="pda-brand"> <option value="select">Select PDA brand...</option> <option value="dell">Dell</option> <option value="hp">HP</option> <option value="palmone">PalmOne</option> </select> <select id="pda-type"> <option class="select" value="select">Select PDA type...</option> <option class="dell" value="aximx30">Axim X30</option> <option class="dell" value="aximx50">Axim X50</option> <option class="hp" value="ipaqhx2750">iPAQ hx2750</option> <option class="hp" value="ipaqrx3715">iPAQ rx3715</option> <option class="palmone" value="tungstene2">Tungsten E2</option> <option class="palmone" value="zire72">Zire 72</option> </select> <select id="pda-amount"> <option class="select" value="select">Select PDA Amount...</option> <option class="aximx30" value="1">1</option> <option class="aximx30" value="2">2</option> <option class="aximx50" value="1">1</option> <option class="aximx50" value="2">2</option> <option class="aximx50" value="3">3</option> <option class="aximx50" value="4">4</option> <option class="ipaqhx2750" value="1">1</option> <option class="ipaqhx2750" value="2">2</option> <option class="ipaqhx2750" value="3">3</option> <option class="ipaqhx2750" value="4">4</option> <option class="ipaqhx2750" value="5">5</option> <option class="ipaqrx3715" value="1">1</option> <option class="ipaqrx3715" value="2">2</option> <option class="tungstene2" value="1">1</option> <option class="zire72" value="1">1</option> <option class="zire72" value="2">2</option> <option class="zire72" value="3">3</option> </select> </div> </form> </body> </html> hey I have a page in which I already have a 3 level combox that works fine. I want to add to that page another combobox of 2 level. When I tried to do it I find out that they control of each other. I tried changing the variables names. (changing "x" into "w" in the second combobox) Well that worked. Can you please help me figure it out? here is the end of the first form: var temp1=document.isc.stage3 function redirect1(y){ for (m=temp1.options.length-1;m>0;m--) temp1.options[m]=null for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){ temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value) } temp1.options[0].selected=true } function redirect2(z){ parent.mainframe.location=temp1[z].value; and here is the end of the second combobox: var temp=document.doublecombo.stage2A function redirect(w){ for (n=temp.options.length-1;n>0;n--) temp.options[n]=null for (k=0;k<groupa[w].length;k++){ temp.options[k]=new Option(groupa[w][k].text,groupa[w][k].value) } temp.options[0].selected=true } function go(){ location=temp.options[temp.selectedIndex1].value } Thanks Elad the code below was got from <http://www.javascriptkit.com/javatutors/selectcontent2.shtml> I was following to tutorial to learn how to create multi-level select list in javascript. i have gone through it but wanted to print the individual selected item in each option, i could not. the first worked well for be because the selected options are manually typed, but the last option became difficult because they are dynamically loaded. Please can anyone guild me on how to print the selected option of the second field? <form name="classic"> <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px"> <option selected>Select A City</option> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="uk">United Kingdom</option> </select> <select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)"> </select> </form> <script type="text/javascript"> var countrieslist=document.classic.countries var citieslist=document.classic.cities var cities=new Array() cities[0]="" cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"] cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"] cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"] function updatecities(selectedcitygroup){ citieslist.options.length=0 if (selectedcitygroup>0){ for (i=0; i<cities[selectedcitygroup].length; i++) citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1]) } } </script> Can anyone spot how to make this drop-in popup do so at slightly higher horizontal level than currently? I've played around with it quite a bit, but no luck. Code: <html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript1.2">
// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
// This credit MUST stay intact for use
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"
var bouncelimit=32 //(must be divisible by 8)
var direction="up"
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}
function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}
window.onload=initbox
</script>
</head>
<body>
<div id="dropin" style="position: absolute; visibility: hidden; left: 200px; top: 100px; width: 500px; height: 300px; background-color: #F5F5F5">
<div align="right">
<a href="#" onClick="dismissbox();return false">[Close Box] </a>
</div>
<p>SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML
</div>
</body>
</html>
Hello, I have a 2 level combo box that are dependent on each other and what I want to happen when the "submit" button is selected is for an html text answer to be displayed on the same page below the combo boxes based off of what was selected in the second combo box. I've tried using hide/show functions with JavaScript but couldn't figure out how to link the 2 scripts together. What I have is as follows: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
// first combo box
data_1_1 = new Option("School 1", "$");
data_1_2 = new Option("School 2", "$$");
// second combo box
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
data_2_4 = new Option("24", "--");
data_2_5 = new Option("25", "--");
// third combo box
// other parameters
displaywhenempty=""
valuewhenempty=-1
displaywhennotempty="-select-"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
<body>
<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">Delaware</option>
<option value="value3">Pennsylvania</option>
</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<input type="button" name="test" value="Submit"
onclick="go()"><BR>
<BR>
</form>
<body>
</html>
If someone can either assist with this or point me in the right direction of how to do this it would be a great help. Thanks in advance, Hello everyone, I run an educational website with a CSS/JavaScript based menu that is right now only single level. I am trying to convert it over to multi level. I have tried a few other multi level menus but I have done a lot of customization in terms of appearance for this current menu, so none of the new ones looked right. I was wondering if I could get some help? It seems simple, yet I can't figure it out. Here is the site: http://www.anthonyteacher.com Here is the CSS: http://www.anthonyteacher.com/wp-con...nk2L/style.css (see /* Main Menu */ ) Here is the JavaScript: http://pastebin.com/jx8zQJeA I'd appreciate any help! Thanks! ^^ (A) Dependable dropdown lists (4 level) 1 Level dropdown list 2 Level dropdown list 3 Level dropdown list 4 Level dropdown list Every dropdown list is depends on another dropdown list For example if I select a value from 1 dropdown list then 2 dropdown list will appear. And then I select a value from 2 dropdown list then 3 dropdown list will appear. And if I select a value from 3 dropdown list then 4 dropdown list Multiple selection will be enable. It means every dropdown list may have hundreds of values. Thus, In this situation of multiple selection of values I analyze that, use of dropdown isn't suitable because if a dropdown value has 500 related values then these 500 values disturb the page design. So, is there any other better solution for it? I'm writing a report for my college class about what it takes to get into the field of computer programming and i need to obtain information from someone who is in the position of hiring entry level computer programmers. it would Really! help me out if someone has time to fill out these questions. I know its asking for a lot but if anyone has the time it would be highly appreciated! 1. Tell me a little bit about the company? ( Main focus, how did it start, who are your customers, company growth,etc) 2. Where do you see the industry in 5 years? 3. What makes the company successful? 4. What are you looking for in a potential candidate? 5. When interviewing a potential employee, what questions do you expect them to ask you? 6. How could a typical day on the job be described? How much variety is there on a day-to-day basis? 7. When you look at resume, what is your main focus in terms of order and importance, reference? 8. How do you feel about networking as a tool to research potential candidates? (ex. LinkedIN, Facebook?) 9. What education, experience and qualifications are need to enter the field as entry level position? 10. What is the salary range and job responsibilities? 11. What is best liked and least liked about this field / job? 12. What is a typical interview in this field? How is it different then regular interviews? 13. Is there a demand for people in this field? 14. What special advice could you give a person entering the field? 15. What types of training do companies offer persons entering this field? 16. Which professional journals and organizations would help me learn more about this field? 17. How can a new graduate obtain experience in the field? How and where can one get internship? 18. What types of technologies and software is used in the field? 19. Would you have any more information that will be of use to me? 20. Can you suggest others who may be valuable sources of information? my password target opens in a new window using the 'open.window' command but i would like a command string that opens this target in the same frame within my frames page that my other pages open in. thanks in advance manj |
|||||||