|
JavaScript - Four Level Connected Dropdowns
I'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! Similar TutorialsIs 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... 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 I have a status page on my website, but I have multiple servers, and they cramp up the one page. I was wondering if it was possible if I could have a link that says "CSS Server Status" and it drops down with the code for the CSS server, and say for "SAMP Server Status" drops down with the code/html for the samp server. I haven't a clue about Javascript, so as much help as possible would be appretiated. Hello, I am very new to HTML. Yesterday I have started learning HTML. I want to make two Dropdown but should be linked with each other. There value should change after click "go" button. In other word I want to make one html for Post Code/Pin Codes of my state. Please Help Me!!! I have made script till he <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>PIN CODES OF GOA</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFD700;width:100px;text-align:top;"> <b>GOA</b><br /> BEACHES<br /> CHURCHES<br /> BARS </td> <td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;"> </body> </html> </body> <form> <select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value=VASCO</option> <option value=FATORDA</option> </select> <select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value="403802"</option> <option value="403602"</option> </select> <input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> </form> <script type="text/javascript"> tday =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); tmonth=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December"); function GetClock(){ d = new Date(); nday = d.getDay(); nmonth = d.getMonth(); ndate = d.getDate(); nyear = d.getYear(); nhour = d.getHours(); nmin = d.getMinutes(); nsec = d.getSeconds(); if(nyear<1000) nyear=nyear+1900; if(nhour == 0) {ap = " AM";nhour = 12;} else if(nhour <= 11) {ap = " AM";} else if(nhour == 12) {ap = " PM";} else if(nhour >= 13) {ap = " PM";nhour -= 12;} if(nmin <= 9) {nmin = "0" +nmin;} if(nsec <= 9) {nsec = "0" +nsec;} document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+""; setTimeout("GetClock()", 1000); } window.onload=GetClock; </script> <div id="clockbox"></div> </td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Search Your Post Code</td> </tr> </table> Hi, I've currently got a group of dropdowns that update a price total on my site. I want to add an 'add to cart' button too but this requires each drop down having 2 values (one to update total and one to go towards the 'add to cart button'). I've researched this but still have no idea how to go about getting 2 values from one dropdown though. What I've done is create an explanation page where I have one form for the running total, and then a completely seperate form for the add to cart. Both work independanly, but I want to effectively combine them. Here's the page: tigerfrog.co.uk/merge_codes.html code for running total is: Head Code: <script language="JavaScript" type="text/javascript">
function calc2(){
var totalStr = ''; // for testing only
var totalValue=0;
var DDL;
var cnt = 0; // for testing only
for (var j=1; j<=2; j++) {
DDL = document.getElementById('dropDownList'+j);
temp = DDL.options[DDL.selectedIndex].value;
totalValue += Number(temp);
if (DDL.selectedIndex != 0) { totalStr += '|'+temp; cnt++; } // cnt++ is for testing only
}
document.forms[0].total.value=totalValue;
}
</script>
Body Code: <form id="dropDownForm2" name="dropDownForm2"> <td class="style14"> <select id="dropDownList1" class="style10" name="D10" onchange="calc2();"> <option selected="" value="10">item1</option> <option value="20">item2</option> <option value="30">item3</option> </select> <br /> </td> <td class="style14"> <select id="dropDownList2" class="style10" name="D11" onchange="calc2();"> <option href="alloy.htm" selected="" value="11">item4</option> <option value="12">item5</option> <option value="13">item6</option> </select><br /> total </td> <input class="style10" name="total" onfocus="blur()" readonly="" size="4" style="width: 46px; height: 22px;" type="text" value="958" /></form> The code for the add to cart is: Code: <form action="http://www.romancart.com/cart.asp" method="post"> <input name="storeid" type="hidden" value="43579" /> <input name="itemcode" type="hidden" value="TF Series" />Frameset <select name="itemname2"> <option value="TF100" value="TF100">item1</option> <option value="TF300C" value="TF300">item2</option> <option value="TF400C" value="TF400">item3</option> </select><br /> Groupset <select name="itemname5"> <option value="SL T1" value1="SL T1">item4</option> <option value="SLR T1" value1="SLR T1">item5</option> </select><br /> <input type="submit" value="Add to basket" /> </form> If I had 2 values from each drop down in the first group of dropdowns then I could get it working, but I'm not sure how to do this. Any help will be great, Phil Hi everyone. I am trying to have 2 sets of populated dropdowns (state,city). One for the billing address and the other one for shipping address. I read this article http://www.digimantra.com/technology...ered-dropdown/ and did it step by step. It worked when I had only a set of populated dropdowns but when I duplicated and edited the script, only the new script works. Can somebody tell me where I went wrong? Here's the code for the script: Code: <script type="text/javascript">
//define the absolute path to your php script here
var site_root='';
//function to create ajax object
function pullAjax(){
var a;
try{
a=new XMLHttpRequest()
}
catch(b)
{
try
{
a=new ActiveXObject("Msxml2.XMLHTTP")
}catch(b)
{
try
{
a=new ActiveXObject("Microsoft.XMLHTTP")
}
catch(b)
{
alert("Your browser broke!");return false
}
}
}
return a;
}
//this function does the ajax call, and appends cities into the second dropdown
function populate_cities(x)
{
obj=pullAjax();
var cities_list=document.getElementById('city');
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
//returns comma separated list of cities after successful ajax request
var tmp=obj.responseText;
//split function returns array of city
cities=tmp.split(',');
//if second dropdown already has some data, CLEAR it
if(cities_list.length>1)
clean_cities(cities_list);
//for loop to append the cities
var i=0;
for(i=0;i<cities.length;i++)
append_city(cities[i]);
}
};
obj.open("GET",site_root+"cities_data.php?state="+ x.value,true);
obj.send(null);
}
//this gets call in the for loop and creates the options for the dropdown
function append_city(city_value)
{
var cities_list=document.getElementById('city');
cities_list.options[cities_list.options.length]=new Option(city_value,city_value,false,false);
}
//CLEARs the dropdown
function clean_cities()
{
var cities_list=document.getElementById('city');
cities_list.options.length=1;
}
//autoloads the city list, when the page first loads
function autoload()
{
populate_cities(document.getElementById('state_pro vince'));
}
</script>
<script type="text/javascript">
//define the absolute path to your php script here
var site_root='';
//function to create ajax object
function pullAjax(){
var a;
try{
a=new XMLHttpRequest()
}
catch(b)
{
try
{
a=new ActiveXObject("Msxml2.XMLHTTP")
}catch(b)
{
try
{
a=new ActiveXObject("Microsoft.XMLHTTP")
}
catch(b)
{
alert("Your browser broke!");return false
}
}
}
return a;
}
//this function does the ajax call, and appends cities into the second dropdown
function populate_cities(x)
{
obj=pullAjax();
var cities_list=document.getElementById('shipping_city ');
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
//returns comma separated list of cities after successful ajax request
var tmp=obj.responseText;
//split function returns array of city
cities=tmp.split(',');
//if second dropdown already has some data, CLEAR it
if(cities_list.length>1)
clean_cities(cities_list);
//for loop to append the cities
var i=0;
for(i=0;i<cities.length;i++)
append_city(cities[i]);
}
};
obj.open("GET",site_root+"shipping_cities_data.php ?state="+x.value,true);
obj.send(null);
}
//this gets call in the for loop and creates the options for the dropdown
function append_city(city_value)
{
var cities_list=document.getElementById('shipping_city ');
cities_list.options[cities_list.options.length]=new Option(city_value,city_value,false,false);
}
//CLEARs the dropdown
function clean_cities()
{
var cities_list=document.getElementById('shipping_city ');
cities_list.options.length=1;
}
//autoloads the city list, when the page first loads
function autoload()
{
populate_cities(document.getElementById('shipping_ state_province'));
}
</script>
Thanks! D Hi, I have mutiple dropdowns in my HTML table in one of the columns.The dropdowns have three values 'Blank','Approve' and 'Reject'.What I want is when user changes the values in any of the dropdown,It will ask for the confirmation from user.If user click OK ,it will change the value in dropdown and calls another function else it will be reset to previous value.e.g, Suppose previous value is 'Reject' and user tries to change it to 'Approve'.When confirm window comes up and user clicks cancel it will reset to Reject.On OK it will change to 'Approve'. How can I handle this in Javascript? Please help. Thanks, Anil I've been trying to create a page with two forms that have drop downs in them. These drop downs are set to store information from the previous drop down and I can get one to work easliy but having two forms has got me stopped in my tracks. I'm new to this and new to the forums so any help is apeciated. Just go easy on me. heh! Under the function where it says function setOptions(chosen,theform) { var selbox = document.theform.opttwo; I tried changing 'theform' to 'myform1' and so forth but neither worked. Thanks again for your time and effort in helping me! Here's my code: Code: <html>
<head>
<SCRIPT TYPE="text/javascript">
<!--
function setOptions(chosen,theform) {
var selbox = document.theform.opttwo;
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}
//-->
</SCRIPT>
</head>
<body link="#000066" vlink="#999999" alink="#FFFF00">
<table width="40%" height="447" border="0">
<tr>
<td><div align="left"><img src="images/topbar.jpg" width="740" height="29" border="0" usemap="#Map"></div></td>
</tr>
<tr>
<td height="332"> <p align="left"> </p>
<div align="left">
<table width="740" height="187" border="0" align="left">
<tr>
<td height="97" colspan="2"> <div align="center"></td>
</tr>
<tr>
<td width="49%" height="21"> <div align="center"><strong>Form One</strong></div></td>
<td width="51%"> <div align="center"><strong>Form Two</strong></div></td>
</tr>
<tr>
<td height="47"><form name="myform1">
<div align="center">
<p>
<select name="optone" size="1"
onchange="setOptions(document.myform1.optone.options[document.myform1.optone.selectedIndex].value,"myform1");">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
<br>
<br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one
of the options above first</option>
</select>
<br>
<br />
<input type="submit" name="go" value="Submit"
onclick="alert(document.myform1.opttwo.options[document.myform1.opttwo.selectedIndex].value);">
</p>
</div>
</form></td>
<td><form name="myform2">
<div align="center">
<p>
<select name="optone" size="1"
onchange="setOptions(document.myform2.optone.options[document.myform2.optone.selectedIndex].value,"myform2");">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
<br>
<br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one
of the options above first</option>
</select>
<br>
<br />
<input type="submit" name="go" value="Submit"
onclick="alert(document.myform2.opttwo.options[document.myform2.opttwo.selectedIndex].value);">
</p>
</div>
</form></td>
</tr>
</table>
</div>
<p align="left"> </p>
<p align="left"> </p></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="left"><img src="images/bottombar.jpg" width="740" height="16"></div></td>
</tr>
<tr>
<td height="56"> <div align="center"></td>
</tr>
</table>
</body>
</html>
Apologizes for the long post, I wanted to be thorough. I am not very familiar with Javascript at all, learning every day - but hopefully this has an easy fix. I'm making an application where students can select their SCHOOL in a dropdown, which based on the selection, displays a second dropdown containing CLASSES. This part works fine. It then converts the value of the dropdown-selection to an ID-number which is used pasted in a URL for that class's online schedule (Example: www. url.com/generator/school= '+chosenSchool+' class= '+chosenClass+' blablabla.aspx) - plus saves the ID to recognize the selection for later use. This also worked fine, before I added the more than one school. Now, whenever I select a SCHOOL and a CLASS, I get the correct SCHOOL but the CLASS is always the FIRST ID in the list (marked in red ), and I'm not sure why. I thought about creating different variables for each class-list, but there is really more than two, and I need the name of the variable to be the same (chosenSchool) for the storing and URL-input. Code:
$(function() {
$("#school").change(function() {
// DROPDOWN LIST WITH DIFFERENT SCHOOLS
var schoolValue = document.getElementById('dropdown-school').selectedIndex; // GETS THE DROPDOWN VALUE (0-1)
var schoolID = ["60690","60360"] // NEEDED ID
chosenSchool=schoolID[schoolValue] // CONVERTS TO ID
var selectedSchool = $("#school").val(); // MANAGE DROPDOWNS BELOW
// DISPLAYS DROPDOWN LIST WITH CLASSES FROM THE FIRST SCHOOL WHEN SELECTED
if(selectedSchool == "firstSchool") {
$("#firstSchool").show(); // SHOWS DROPDOWN IF THE RIGHT ONE
var firstClassValue = document.getElementById('classlist-1').selectedIndex; // GETS THE DROPDOWN VALUE (0-5)
var firstClassID =
[" 45B9D5AD-8E32 ","0A9261F7-8BC7E","307C7E8C-054E","B21D19A7-5076","99ECF5B8-E0E1","36B44988-006F""] // NEEDED ID
chosenClass=firstClassID[firstClassValue] // CONVERTS TO ID
}
else {
$("#firstSchool").hide(); // HIDES DROPDOWN IF NOT THE RIGHT ONE
}
// DISPLAYS DROPDOWN LIST WITH CLASSES FROM THE SECOND SCHOOL WHEN SELECTED
if(selectedSchool == "secondSchool") {
$("#secondSchool").show(); // SHOWS DROPDOWN IF THE RIGHT ONE
var secondClassValue = document.getElementById('classlist-2').selectedIndex; // GETS THE DROPDOWN VALUE (0-5)
var secondClassID =
[" 4EBF33E0E514 ","05F96E17-8DF9","4EA71DA6-5CCC","F7D08749-746E","0CA6F782-6B9D","BBD66276-752F"] // NEEDED ID
chosenClass=secondClassID[secondClassValue] // CONVERTS TO ID
}
else {
$("#secondSchool").hide(); // HIDES DROPDOWN IF NOT THE RIGHT ONE
}
});
$('#school').trigger('change'); // TRIGGERS THE CHANGE
});
// SAVES THE SELECTED VALUES
function saveSettings() {
localStorage.setItem('SCHOOL', chosenSchool); // SAVES SCHOOL ID-NUMBER
localStorage.setItem('CLASS', chosenClass); // SAVES CLASS ID-NUMBER
location.reload(true) // RELOAD WITH SAVED VALUES
}
// HTML:
SCHOOL DROPDOWN:
<select name="school" id="school">
<option value="val0">firstSchool</option>
<option value="val1">secondSchool</option>
</select>
CLASS DROPDOWN 1:
<select name="classlist-1" id="classlist-1">
<option value="val0">Class 1</option>
<option value="val1">Class 2</option>
<option value="val2">Class 3</option>
<option value="val3">Class 4</option>
<option value="val4">Class 5</option>
<option value="val5">Class 6</option>
</select>
CLASS DROPDOWN 2:
<select name="classlist-2" id="classlist-2">
<option value="val0">Class 1</option>
<option value="val1">Class 2</option>
<option value="val2">Class 3</option>
<option value="val3">Class 4</option>
<option value="val4">Class 5</option>
<option value="val5">Class 6</option>
</select>
So my "chosenClass" is always the ID marked red. Why? Appreciate and help I can get.. Thanks for reading. Please keep in mind that I have more than two schools and class-lists, and any misspellings might be because I changed some values to keep it simple. Regards, Andrew. I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button. What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made. "Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..." Can this be done on each line as a second onChange event? Code: <html>
<head>
<HEAD>
<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Selection 2";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Selection 3";
arrItemsGrp1[3] = 1;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
arrItems2[13] = "Selection 2";
arrItemsGrp2[13] = 1
arrItems2[14] = "Selection 3";
arrItemsGrp2[14] = 1
arrItems2[15] = "Selection 4";
arrItemsGrp2[15] = 1
arrItems2[16] = "Selection 5";
arrItemsGrp2[16] = 1
arrItems2[17] = "Selection 6";
arrItemsGrp2[17] = 1
var arrItems3 = new Array();
var arrItemsGrp3 = new Array();
arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
arrItems3[43] = "Selection 2";
arrItemsGrp3[43] = 12
arrItems3[44] = "Selection 3";
arrItemsGrp3[44] = 12
var arrItems4 = new Array();
var arrItemsGrp4 = new Array();
arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42
var arrItems5 = new Array();
var arrItemsGrp5 = new Array();
arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
arrItems5[245] = "Selection 2";
arrItemsGrp5[245] = 133
function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
</HEAD>
<BODY>
<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
</td>
<tr>
<td width="305" align="left">
<font size="2" face="MS Sans Serif"> Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
</select></font></font></td>
<td width="225" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 2:
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td>
<td width="225" align="center" rowspan="4">
<TEXTAREA name="text1" cols="25" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 3:
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 4:
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font face="MS Sans Serif" size="2"> Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<p><font face="MS Sans Serif" size="2"> Answer: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select>
</font></p></td>
<td width="225" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</tr>
<tr>
<td width="778" align="left" colspan="2">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Hi, Ive been days searching posting, trying to find a solution to my pure css hover menu that works perfect, except in toucscreens. Ive been today to apples shop to test, and yes sometimes it opens on click other it wont open, something strange. So the best is to serve another menu to toucsreens such as smartphones and tablets, or make the menu work on both. I have tried my menu (Peterneds whateverhover) but cant manage, also have no touchscreen to do tests on. Searching I found Suckerfish Dropdowns and the dropdown have a script for ie6 as ie6 does not support hover. This is the script: Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
I wonder, isnt it posible to change the onmouseover and onmouseout to touchstart and touchend? I imagine that sounds just to easy, suppose if that were the case it would already been done, however I read that touchstart is for iphone etc... Any help please, I do understand javascript when I read it, but am not able to do my own functions. Thanks Helen I'd like to create two dropdown (select) lists with a search button next to it so if the user chooses A in the first list and C in the second list and clicks 'search', the results return items that relate to both A and C. Practical Example: User chooses "London" in the first dropdown and "Middle Schools" in the second. Result returns the middle schools I've listed for London. How can this be done or if it can't, is there another way to achieve what I want? -edit- I found what I wanted he http://www.alistapart.com/d/complexd...ts&de=Pancakes However, now my question is what would I put in for the form "action" to populate the results? 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! 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"))
}
}
}
}
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;
}
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 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 Resolved.
|
|||||||