Learn VBA & Macros in 1 Week!

JavaScript - Multiple Sets Of Dynamic List Boxes

Full Excel VBA Course - Beginner to Expert

Multiple Sets Of Dynamic List Boxes	View Content

I'm trying to use this code to create 6 sets of (each set 2 Dynamic List boxes). However I have the problem that Category 1-6 selection does not select the correct (adjacent) subcateory list box and instead populates the last selection in subcategory list box 1. How can I set the Java/HTML code so that for example Category #3, populates the selection/case into SubCategory#3 list box?

Form Code (only with 2 Category, SubCategory) this when working will be expanded to 6.

Code:

<table border="0" width="560">
<tbody>
<tr>
<td align="center"><strong>Item#</strong></td>
<td align="center">Paint Type</td>
<td align="center">Colour</td>
<td align="center">Litres</td>
</tr>
  <tr>

    <td width="56%" align="left" valign="middle">1.<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
 
      <option value="">Select Range</option>
      <option value="New Paint">New Paint</option>
      <option value="Recycled Paint">Recycled Paint</option>
    </select></td><td name="cell1">

                 <script type="text/javascript" language="JavaScript" >
 document.write('<select name="subcategory1" id="subcategory1" name="cell1" ><option value="" name="subcategory1">Select Product</option></select>')
 </script>

 <noscript><select name="subcategory1" id="subcategory1" >
 <option value="">Select Product</option>
 </select>
 </noscript>

</td><td>
 <input class="formbox" size="20" name="01_colour" /></td><td>
 <input class="formbox" size="5" name="01_litres" /></td>
  </tr><br>

  <tr>

 
    <td width="56%" align="left" valign="middle">2.<select name="category2" id="category2" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
 
      <option value="">Select Range</option>
      <option value="New Paint2">New Paint</option>
      <option value="Recycled Paint2">Recycled Paint</option>
    </select></td><td name="cell2">
<script type="text/javascript" language="JavaScript">
 document.write('<select name="subcategory" id="subcategory"><option value="" name="subcategory">Select Product</option></select>')
 </script>
 <noscript><select name="subcategory" id="subcategory" >
 <option value="">Select Product</option>
 </select>
 </noscript>
 

</td><td>
 <input class="formbox" size="20" name="02_colour" /></td><td>
 <input class="formbox" size="5" name="02_litres" /></td>
  </tr>    
 

</table>

Java Script which I think is the problem, I cant work out how to name the relevant cell the selection should display in.

Code:

<script language="javascript" type="text/javascript">
function dropdownlist(indexlist)
{

document.SampleForm.subcategory1.options.length = 0;
	switch(indexlist)
	{
	
		case "New Paint" :
		   	 document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
			document.SampleForm.subcategory1.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
			document.SampleForm.subcategory1.options[2]=new Option("Audio/Video","Audio/Video");
			document.SampleForm.subcategory1.options[3]=new Option("Beddings","Beddings");
			document.SampleForm.subcategory1.options[4]=new Option("Camera","Camera");
			document.SampleForm.subcategory1.options[5]=new Option("Cell Phones","Cell Phones");
	
	break;
	
		case "Recycled Paint" :
			    document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
			document.SampleForm.subcategory1.options[1]=new Option("Interior, Flat/Matt","Interior, Flat/Matt");
			document.SampleForm.subcategory1.options[2]=new Option("Interior, Low Sheen","Interior, Low Sheen");
			document.SampleForm.subcategory1.options[3]=new Option("Interior, Semi Gloss, Acrylic","Interior, Semi Gloss, Acrylic");

			document.SampleForm.subcategory1.options[4]=new Option("Interior, Gloss, Acrylic","Interior, Gloss, Acrylic");

			document.SampleForm.subcategory1.options[5]=new Option("Interior, High Gloss, Acrylic","Interior, High Gloss, Acrylic");
			document.SampleForm.subcategory1.options[6]=new Option("Interior, Suede","Interior, Suede");
			document.SampleForm.subcategory1.options[7]=new Option("Exterior, Flat/Matt","Exterior, Flat/Matt");
			document.SampleForm.subcategory1.options[8]=new Option("Exterior, Low Sheen","Exterior, Low Sheen");
			document.SampleForm.subcategory1.options[9]=new Option("Exterior, Semi Gloss, Acrylic","Exterior, Semi Gloss, Acrylic");
			document.SampleForm.subcategory1.options[10]=new Option("Exterior, Gloss, Acrylic","Exterior, Gloss, Acrylic");
			document.SampleForm.subcategory1.options[11]=new Option("Exterior, High Gloss, Acrylic","Exterior, High Gloss, Acrylic");
			document.SampleForm.subcategory1.options[12]=new Option("Paving/Concrete","Paving/Concrete");
			document.SampleForm.subcategory1.options[13]=new Option("Dulux Acratex","Dulux Acratex");
	
	break;
	
	

	
	}




return true;
}
</script>

Thanks

Daniel

Full Excel VBA Course - Beginner to Expert

Modification Of Multiple Dynamic Combo Boxes

Similar Tutorials

View Content

Hi all, please help...
There is a small, but very usability script - Multiple Dynamic Combo Boxes by Elviro Mirko (http://www.javascriptkit.com/script/...plecombo.shtml). Since there are many versions of this script. One of them, which I did.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box //
data_1 = new Option("All Models", "#");
data_2 = new Option("Model 1", "#");
data_3 = new Option("Model 2", "#");


// second combo box //
//All
data_1_1 = new Option("All Types", "#");
data_1_2 = new Option("Type 1", "#");
data_1_3 = new Option("Type 2", "#");
//Model 1
data_2_1 = new Option("All Types", "#");
data_2_2 = new Option("Type 1", "#");
data_2_3 = new Option("Type 2", "#");
//Model 2
data_3_1 = new Option("All Types", "#");
data_3_2 = new Option("Type 1", "#");
data_3_3 = new Option("Type 2", "#");


// third combo box //
//All Models
data_1_1_1 = new Option("All Sizes", "#");
data_1_1_2 = new Option("Size 1", "#");
data_1_1_3 = new Option("Size 2", "#");

data_1_2_1 = new Option("All Sizes", "#");
data_1_2_2 = new Option("Size 1", "#");
data_1_2_3 = new Option("Size 2", "#");

data_1_3_1 = new Option("All Sizes", "#");
data_1_3_2 = new Option("Size 1", "#");
data_1_3_3 = new Option("Size 2", "#");

//Model 1
data_2_1_1 = new Option("All Sizes", "#");
data_2_1_2 = new Option("Size 1", "#");
data_2_1_3 = new Option("Size 2", "#");

data_2_2_1 = new Option("All Sizes", "#");
data_2_2_2 = new Option("Size 1", "#");
data_2_2_3 = new Option("Size 2", "#");

data_2_3_1 = new Option("All Sizes", "#");
data_2_3_2 = new Option("Size 1", "#");
data_2_3_3 = new Option("Size 2", "#");

//Model 2
data_3_1_1 = new Option("All Sizes", "#");
data_3_1_2 = new Option("Size 1", "#");
data_3_1_3 = new Option("Size 2", "#");

data_3_2_1 = new Option("All Sizes", "#");
data_3_2_2 = new Option("Size 1", "#");
data_3_2_3 = new Option("Size 2", "#");

data_3_3_1 = new Option("All Sizes", "#");
data_3_3_2 = new Option("Size 1", "#");
data_3_3_3 = new Option("Size 2", "#");


// fourth combo box //
//All Models
data_1_1_1_1 = new Option("All color","http://special.link");
data_1_1_1_2 = new Option("Color 1","http://special.link");
data_1_1_1_3 = new Option("Color 2","http://special.link");

data_1_1_2_1 = new Option("All color","http://special.link");
data_1_1_2_2 = new Option("Color 1","http://special.link");
data_1_1_2_3 = new Option("Color 2","http://special.link");

data_1_1_3_1 = new Option("All color","http://special.link");
data_1_1_3_2 = new Option("Color 1","http://special.link");
data_1_1_3_3 = new Option("Color 2","http://special.link");

data_1_2_1_1 = new Option("All color","http://special.link");
data_1_2_1_2 = new Option("Color 1","http://special.link");
data_1_2_1_3 = new Option("Color 2","http://special.link");

data_1_2_2_1 = new Option("All color","http://special.link");
data_1_2_2_2 = new Option("Color 1","http://special.link");
data_1_2_2_3 = new Option("Color 2","http://special.link");

data_1_2_3_1 = new Option("All color","http://special.link");
data_1_2_3_2 = new Option("Color 1","http://special.link");
data_1_2_3_3 = new Option("Color 2","http://special.link");

data_1_3_1_1 = new Option("All color","http://special.link");
data_1_3_1_2 = new Option("Color 1","http://special.link");
data_1_3_1_3 = new Option("Color 2","http://special.link");

data_1_3_2_1 = new Option("All color","http://special.link");
data_1_3_2_2 = new Option("Color 1","http://special.link");
data_1_3_2_3 = new Option("Color 2","http://special.link");

data_1_3_3_1 = new Option("All color","http://special.link");
data_1_3_3_2 = new Option("Color 1","http://special.link");
data_1_3_3_3 = new Option("Color 2","http://special.link");

//All Model 1
data_2_1_1_1 = new Option("All color","http://special.link");
data_2_1_1_2 = new Option("Color 1","http://special.link");
data_2_1_1_3 = new Option("Color 2","http://special.link");

data_2_1_2_1 = new Option("All color","http://special.link");
data_2_1_2_2 = new Option("Color 1","http://special.link");
data_2_1_2_3 = new Option("Color 2","http://special.link");

data_2_1_3_1 = new Option("All color","http://special.link");
data_2_1_3_2 = new Option("Color 1","http://special.link");
data_2_1_3_3 = new Option("Color 2","http://special.link");

data_2_2_1_1 = new Option("All color","http://special.link");
data_2_2_1_2 = new Option("Color 1","http://special.link");
data_2_2_1_3 = new Option("Color 2","http://special.link");

data_2_2_2_1 = new Option("All color","http://special.link");
data_2_2_2_2 = new Option("Color 1","http://special.link");
data_2_2_2_3 = new Option("Color 2","http://special.link");

data_2_2_3_1 = new Option("All color","http://special.link");
data_2_2_3_2 = new Option("Color 1","http://special.link");
data_2_2_3_3 = new Option("Color 2","http://special.link");

data_2_3_1_1 = new Option("All color","http://special.link");
data_2_3_1_2 = new Option("Color 1","http://special.link");
data_2_3_1_3 = new Option("Color 2","http://special.link");

data_2_3_2_1 = new Option("All color","http://special.link");
data_2_3_2_2 = new Option("Color 1","http://special.link");
data_2_3_2_3 = new Option("Color 2","http://special.link");

data_2_3_3_1 = new Option("All color","http://special.link");
data_2_3_3_2 = new Option("Color 1","http://special.link");
data_2_3_3_3 = new Option("Color 2","http://special.link");

//All Model 2
data_3_1_1_1 = new Option("All color","http://special.link");
data_3_1_1_2 = new Option("Color 1","http://special.link");
data_3_1_1_3 = new Option("Color 2","http://special.link");

data_3_1_2_1 = new Option("All color","http://special.link");
data_3_1_2_2 = new Option("Color 1","http://special.link");
data_3_1_2_3 = new Option("Color 2","http://special.link");

data_3_1_3_1 = new Option("All color","http://special.link");
data_3_1_3_2 = new Option("Color 1","http://special.link");
data_3_1_3_3 = new Option("Color 2","http://special.link");

data_3_2_1_1 = new Option("All color","http://special.link");
data_3_2_1_2 = new Option("Color 1","http://special.link");
data_3_2_1_3 = new Option("Color 2","http://special.link");

data_3_2_2_1 = new Option("All color","http://special.link");
data_3_2_2_2 = new Option("Color 1","http://special.link");
data_3_2_2_3 = new Option("Color 2","http://special.link");

data_3_2_3_1 = new Option("All color","http://special.link");
data_3_2_3_2 = new Option("Color 1","http://special.link");
data_3_2_3_3 = new Option("Color 2","http://special.link");

data_3_3_1_1 = new Option("All color","http://special.link");
data_3_3_1_2 = new Option("Color 1","http://special.link");
data_3_3_1_3 = new Option("Color 2","http://special.link");

data_3_3_2_1 = new Option("All color","http://special.link");
data_3_3_2_2 = new Option("Color 1","http://special.link");
data_3_3_2_3 = new Option("Color 2","http://special.link");

data_3_3_3_1 = new Option("All color","http://special.link");
data_3_3_3_2 = new Option("Color 1","http://special.link");
data_3_3_3_3 = new Option("Color 2","http://special.link");


// 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 (document.getElementById("combo_"+i)) {
		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++;
	}


	// 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 (document.getElementById("combo_"+i)) {
		stringa=stringa+'_'+document.getElementById("combo_"+i).selectedIndex;
		if (i==currentbox) break;
		i++;
	}


	// filling the "son" combo (if exists)

	following=parseInt(currentbox)+1;

	if (document.getElementById("combo_"+following)) {
		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'"))
					son.options[0]=new Option(displaywhenempty,valuewhenempty);
				else
					son.options[0]=new Option(displaywhennotempty,valuewhennotempty);
			else
				son.options[i]=new Option(eval(stringa+i+".text"),eval(stringa+i+".value"));
			i++;
		}
		//son.focus()
		i=1;
		combostatus='';
		cstatus=stringa.split("_");
		while (cstatus[i]) {
			combostatus=combostatus+cstatus[i];
			i++;
		}
		return combostatus;
	}
}


function go(elementName){
	var newUrl=document.forms[0].elements[elementName].options[document.forms[0].elements[elementName].selectedIndex].value;
	if(newUrl.indexOf("http://")>=0){//rudamentary url checker! So don't go to a blank page if select box not populated.
		location.href=newUrl;
	}
}
//-->
</script>
</head>
<body>

<form>
Model:
<br />
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">All Models</option>
<option value="value3">Model 1</option>
<option value="value4">Model 2</option>
</select>
<br />
Type:
<br />
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<br />
Size:
<br />
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
<br />
Color:
<br />
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value="value1"> </option> 
<br />
<input type="button" value="Go" onclick="go('combo3')">
<!-- could be changed for onchange event handler on select box -->

</select>

</form>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>
</html>

But I need to when you first start the script immediately showed the first value and its associated down decaying values without - select -

immediately show combo first values

All Models
All Types
All Sizes
All Сolor

(and after next for various behaviors the user's manipulation choice)

**Or are there any other JS solutions that satisfy my request

I would be grateful for any aid....

Dynamic Dropdown List For Sending Messages To Multiple Members

Similar Tutorials

View Content

I am developing a messaging service between members of my site. I am developing this with asp.net mvc. When a user goes to the SendMessage view to send a message to another member, there is a dropdown list which presents the sender with all the members of the site, which he or she will pick as the recipient. However, i don't want it to be a dropdown, i want it to be a text box, where a user types in the first couple of letters of a name, and the dropdown appears then with only the members which have the same couple of letters. This is basically like every email system out there (facebook and gmail have it just like that). And after they chose one, they can select another one in the same textbox, just separated by a comma or something like that.

Basically, how do i achieve that in javascript? I'm not even sure what that functionality is called, that's why i had to explain it properly.

Any help is greatly appreciated. thank you

"multiple Dynamic Combo Boxes" Configuration

Similar Tutorials

View Content

Hello,

I'm using "Cut & Paste Multiple Dynamic Combo Boxes" script. I want to configure it, so at first only 1st combo box is visible and the rest are hidden and only populate based on the selections. Also, when the last parameter (from the 5th combo box) was selected, I need to show the table with the search results based on the all selected parameters.

Here is what I have so far:
Code:

<script language="JavaScript" type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box

	data_1 = new Option("1", "$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	data_1_3 = new Option("13", "-");

// third combo box

	data_1_1_1 = new Option("111", "*");
	data_1_2_1 = new Option("121", "*");
	data_1_3_1 = new Option("131", "*");

// fourth combo box

	data_1_1_1_1 = new Option("1111","%")
	data_1_1_1_2 = new Option("1112","%")
	data_1_2_1_1 = new Option("1211","%")
	data_1_3_1_1 = new Option("1311","%")
	data_1_3_1_2 = new Option("1312","%")
	data_1_3_1_3 = new Option("1313","%")

// fifth combo box

	data_1_1_1_1_1 = new Option("11111","%")
	data_1_1_1_1_2 = new Option("11112","%")
	data_1_1_1_2_1 = new Option("11121","%")
	data_1_1_1_2_2 = new Option("11122","%")
	data_1_1_1_2_3 = new Option("11123","%")
	data_1_1_1_2_4 = new Option("11124","%")
	data_1_2_1_1_1 = new Option("12111","%")
	data_1_3_1_1_1 = new Option("13111","%")
	data_1_3_1_2_1 = new Option("13121","%")
	data_1_3_1_2_2 = new Option("13122","%")
	data_1_3_1_2_3 = new Option("13123","%")
	data_1_3_1_2_4 = new Option("13124","%")
	data_1_3_1_2_5 = new Option("13125","%")
	data_1_3_1_3_1 = new Option("13131","%")
	data_1_3_1_3_2 = new Option("13132","%")

// 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>

<form>
<table style="width: 49%">
				<tr>
					<td style="width: 200px">Option 1:</td>
					<td style="width: 213px">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="none">-select-</option>
	<option value="1">1</option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 2:</td>
					<td style="width: 213px">
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 3:</td>
					<td style="width: 213px">
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 4:</td>
					<td style="width: 213px">
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 5:</td>
					<td style="width: 213px">
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
			</table></form>

This script is used in my html page and I don't have a database to choose from. So, I wonder if it's possible to make all these modifications with only html and JavaScript. Any help will be appreciated.

Thanks in advance.

Multiple Image Sets Slideshow

Similar Tutorials

View Content

hi im creating a simple slide show and i was wondering how to add multiple sets of image. heres my current code
Code:

<html>
<head>
  <script type="text/javascript">
      
      var Images = new Array
	  ('images/up.jpg','images/right.jpg','images/down.jpg','images/left.jpg');
     //my second group of images...
     //('images/bottemleft.jpg','images/topleft.jpg','images/centerstep.jpg','images/topleft.jpg','images/bottemright.jpg');
	  var thisPic = 0;

     
     function initLinks() {
	document.getElementById("nextLink").onclick = processNext;
	document.getElementById("backlink").onclick = processBack;
	document.getElementById("fplaylink").onclick = processfplay;
	document.getElementById("bplaylink").onclick = processbplay;
	document.getElementById("stoplink").onclick = processstop;
     }
	 

     
      function processNext() {
	thisPic++;
	if (thisPic == Images.length) {
		thisPic = 0;
	}
	document.getElementById("myPicture").src = Images[thisPic];
	return false;
	}
	
	function processBack() {
	thisPic--;
	if (thisPic == -1 ) {
		thisPic = (Images.length -1);
		
	}
	   document.getElementById("myPicture").src = Images[thisPic];
	return false;
}
	
	
var stop = 0

     function processfplay() {
	
	if (stop == 1) {
	thisPic++;
	if (thisPic == Images.length) {
		thisPic = 0;
		}
	setTimeout("processfplay()", 200);
	}
	else { 
		stop = 1 ;
		}
		
	document.getElementById("myPicture").src = Images[thisPic];
	return false;
	}
	
	function processbplay() {
	
	if (stop == 2) {
	thisPic--;
	if (thisPic == -1 ) {
		thisPic = (Images.length -1);
		}
	setTimeout("processbplay()", 200);
	}
	else { 
		stop = 2;
		}
		
	document.getElementById("myPicture").src = Images[thisPic];
	return false;
	}
	
	function processstop (){
	(stop = 0)
	document.getElementById("myPicture").src = Images[thisPic];
	return false;
	}


   </script>
 </head>

<body onload=initLinks() >

<h2 align= center>Images used in the slideshow below</h2>

<table align= center>
<tr><td><img src= "images/left.jpg"></td><td><img src= "images/down.jpg"></td>
<td><img src= "images/up.jpg"></td><td><img src= "images/right.jpg"></td></tr>
</table>
<table align= center>
<td><img src= "images/bottemleft.jpg"></td><td><img src= "images/topleft.jpg"></td> 
<td><img src= "images/centerstep.jpg"></td>
<td><img src= "images/topright.jpg"></td><td><img src= "images/bottemright.jpg"></td>
</table>

	<div align="center">
		<h2>The Slidshow</h2>
		<img src="images/ddrlogo.jpg" id="myPicture" alt="Slideshow" />
		<h2>
			<a href="any_old.html" id="nextLink">Next &gt;&gt;</a><br/>
			<a href="any_old.html" id="backlink">Back &lt;&lt;</a><br/>
			<a href="any_old.html" id="fplaylink">Forward Play &lt;&lt;</a><br/>
			<a href="any_old.html" id="bplaylink">backward Play &lt;&lt;</a><br/>
			<a href="any_old.html" id="stoplink">Stop &lt;&lt;</a><br/>

		</h2>
	</div>



</body>
</html>

thanx in advance

Ie9 Breaks Dynamic Select Boxes

Similar Tutorials

View Content

I have the below JS code to change up a select box based on what is selected in another select box. IE9 broke this somehow. It still works in other browsers as well as IE8 and IE7.

When you select something in select box A, it properly populates select box B. However when you go back and change select box A again the script stops working completely.

The error I'm getting from the IE9 developer tools debugger is:

SCRIPT65535: Invalid calling object
dynamicselect.js, line 31 character 18

I have bolded the relevant line below.

Code:

function dynamicSelect(id1, id2) {
	// Browser and feature tests to see if there is enough W3C DOM support
	var agt = navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_mac = (agt.indexOf("mac") != -1);
	if (!(is_ie && is_mac) && 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));
		}
	}
}

Thank you in advance for any help provided.

Customizing Dynamic Select Boxes

Similar Tutorials

View Content

Hi all,
I'm trying to customize a script I found. It's about two select boxes, one for continent selection and one for country selection. When user selects a continent from the first select box, the second select box is filled with the list of the proper countries that belong to this continent.

You can see that code of the script he http://www.howtocreate.co.uk/jslibs/htmlhigh/countryselect.html

In my page, the continent select box is loaded with a continent-value already selected (the selection depends on a database value) and I want to have the second countries select box, also loaded with the proper countries.

I cannot make this happen, unless I change the continent's selection and trigger the onchange event. Can I someway keep the onchange event and also add the ability to have a continent and it's list of countries already loaded?

Random Selects Into Multiple Boxes?!?!

Similar Tutorials

View Content

I have a script which allows me to select random users from one select field to another and works like a charm, but...

I want to be able to get random users from one select field to multiple (lets say 2) other select fields...

So lets say that I have 5 users in the first field (select1):
James
Bill
Jennifer
Bob
Karen

Now when I press a button:
<input value="" type="button" onClick="randomusers();" />

2 users should be moved to select2 and other 2 users moved to select3.

My current script is as follows:
Code:

function randomusers(){
 
    var given = 2, used = {}, randnum, opts = $('#select1 option'), olen = opts.length, hiddiv = $('#hiddendiv');
    function ran() { // generate a unique random number
      randnum = Math.floor(Math.random() * olen);
      return used['u'+randnum] ? ran() : randnum;
    }
    for (var i = 0; i < given; i++) { // get the correct quantity of randoms
      used['u'+ran()] = true;
    }
    var players = opts.filter(function(index) { // remove all options that are not one of the randoms
      return !!used['u'+index];
    }).appendTo('#select2');
    
}

Hoping for help...

Thanks in advance :-)

Help Change Value Of Multiple Text Boxes

Similar Tutorials

View Content

hello,

I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/>
xxxx = random number

the page may contain only one text box id=product or more

i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box

Code:

              var price = document.getElementById('price').value;
              var allElements = document.form1.product;
              var len=allElements.length;
              if(allElements.length){
              for (i = 0; i < len; i++){
              allElements[i].value = price;
               }

I'm not a javascript expert so i don't know if this code is the right way to accomplish this.

Thank you very much for your help

How Do I Use Javascript To Show Multiple Div Boxes

Similar Tutorials

View Content

I set up my javascript so that it shows a hidden div box from an array when i click on a link.

To show only one hidden box, the code is

<a href="javascript:showOnlyThis('divIDgoeshere')">

how do i show multiple hidden div boxes with one link?

Thanks!

Open Multiple Dialog Boxes

Similar Tutorials

View Content

Hello,

I have some code to open 1 dialog box. Could someone please help me manipulate this code to open multiple boxes with different contents. I would like to do this with out duplicating the existing code, maybe setting a variable. The least amount of code the better.

Thanks in advance.

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">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
</head><body>
<div id="dialog" title="Example dialog">
  <p>Some text that you want to display to the user.</p>
</div>
<script type="text/javascript">
  $(document).ready(function() {
   
    $("#dialog").dialog({
      bgiframe: true, autoOpen: false, height: 100, modal: true
    });
  });
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click here to see the popup</a>
</body>
</html>

Multiple Dropdown Boxes To Call Function

Similar Tutorials

View Content

Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question.

Here's what I'm trying to do.

I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated.

S

Managing Multiple Overlay Boxes (named Windows?)

Similar Tutorials

View Content

Hi

I am trying to create a page that has a couple of pop-up overlay boxes from a couple of links, Everything is working ok I think except for a problem on a browser resize.

The original code I found : ( http://kalyanchakravarthy.net/?p=208 ) was created or only one window so the resize code controls both windows, when I think need each one controlled separately. The resize code will make a closed overlay box appear.

Any suggestions or help will be greatly appreciated. THANK YOU

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" />

<script language="javascript" src="jquery-1.2.6.min.js"></script>
<!--script language="javascript" src="jquery-schedule-overlay.js"></script-->
<style type="text/css">

.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }


.overlayBox {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}

.overlayBoxb {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}

.overlayContent {
padding:0px;
}

.overlayContentb {
padding:0px;
}

.closeLink {
float:right;
color:red;
text-decoration:none;
}
a:hover { text-decoration:none; }

</style></head>

<body>

<div class="bgCover">&nbsp;</div>

<a href="#" class="launchLink">Launch Window</a>

<div class="overlayBox">
<div class="overlayContent">
<a href="#" class="closeLink">Close</a>

<img src="Session-A-mock-up.jpg" alt="Session A Schedule " />
</div></div>

<br /><br />

<a href="#" class="launchLinkb">Launch Window 2</a>

<div class="overlayBoxb">
<div class="overlayContentb">
<a href="#" class="closeLink">Close</a>

<img src="Session-B-mock-up.jpg" alt="Session B Schedule "/>
</div></div>

<script language="javascript">

function showOverlayBox() {

//if box is not set to open then don't do anything 
if( window.isOpen == false ) return;

// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
display:'block',
left:( $(window).width() - $('.overlayBox').width() )/2,
top:( $(window).height() - $('.overlayBox').height() )/2 -20,
position:'absolute'
});


// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});



function showOverlayBoxb() {

windowb=window.open;
//if box is not set to open then don't do anything
if( windowb.isOpen == false ) return;

// set the properties of the overlay box, the left and top positions
$('.overlayBoxb').css({
display:'block',
left:( $(window).width() - $('.overlayBoxb').width() )/2,
top:( $(window).height() - $('.overlayBoxb').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
}

function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}

function doOverlayOpenb() {
//set status to open
isOpen = true;
showOverlayBoxb();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}

function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox,.overlayBoxb').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}

// if window is resized then reposition the overlay box

$(window).bind('resize',showOverlayBox) ;
$(window).bind('resize',showOverlayBoxb) ;

// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// activate when the link with class launchLink2 is clicked
$('a.launchLinkb').click( doOverlayOpenb );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );

</script>

</body>
</html>

Logistics Of Handling Multiple Im Chat Boxes Javascript/css

Similar Tutorials

View Content

Hi,

I think the problem I am having is an event not a css issue, so I hope I posted in the right forum.

What I am trying to achieve is the capability to provide multiple instant chat messages. I have the php/ajax for the instant messages, what I am not sure is how to be able to view multiple chats.

What I have started to do is limit it to five possible instant chat messages and have five divs in place with visibility hidden. It works fine for one.

But if someone clicks on the name of a person they wish to chat with, the way I am currently doing it, I would need to find out:
1. which divs were free to start an instant chat in (I have no idea how to do this with divs)?
2. Having identified it I will need to change the visibility so it suddenly becomes visible

I guess firstly am I going about this the right way to be able to host/view multiple chats?

My code is below.
Main Page
PHP Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitchat').live('click',function(){
    var data = $('#chatmessage').serialize();
    $.post ('insertChat.php',data, function(){
            $('#chatmessage').each (function(){
                this.reset();
            });
                return false;
        });
    });
});
</script>

<script type="text/javascript">
function loadChat(File,ID,Msg,TID,Cile){
loadXMLDoc1(File,ID,Msg);
delay = setTimeout(function(){loadChatRefresh(Cile,TID,Msg)},5000);
}
</script>

<script type="text/javascript">
function loadChatRefresh(File,ID,Msg){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
    try{
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
     timer = setInterval(function(){loadChatRefresh(File,ID,Msg)},3000);
    }
  }

var params=Msg;
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>

<script type="text/javascript">
function loadXMLDoc1(File,ID,Msg){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
    try{
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

var params=Msg;
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>

<body>

            <h1>Test</h1>

<?php
include("dbconnect.php");

            $result = mysql_query("SELECT *, signedin.PId as SIPId FROM signedin INNER JOIN friends
            ON signedin.PId=friends.invited OR signedin.PId=friends.invitee
            WHERE ((friends.invitee={$_SESSION['MyPId']} AND friends.statae='accepted') OR (friends.invited={$_SESSION['MyPId']} AND friends.statae='accepted'))
            AND signedin.LogOff IS NULL AND signedin.PId !={$_SESSION['MyPId']}");

            while($row = mysql_fetch_array($result)){
                $mugwort= $row['SIPId'] . ';';
                }

$motherwort=explode(';',$mugwort);
foreach ($motherwort as $mulberry){

            $result = mysql_query("SELECT * FROM allusers
            WHERE PId='{$mulberry}'");

            while($row = mysql_fetch_array($result)){
                $nosegay=rand(). rand(). rand(). rand(). rand();
                $nightshade="{$_SESSION['MyPId']};{$mulberry};{$nosegay}";
                echo '<div class="img"><img src="thumbs/' . $row['pphoto'] . '" height="80px" width="80px" onclick="loadChat(\'chat.php\',\'chat1\',\'olivier=' . urlencode($nightshade) . '\',\'chatdisplay\',\'getDisplayChat.php\')";><div class="desc">' . $row['fullname'] . '</div></div><br />';
                }

}

            echo '<br /><div class="clear"></div><br /><br />';

?>
<div class="chat1" id="chat1"></div>
<div class="chat2" id="chat2"></div>
<div class="chat3" id="chat3"></div>
<div class="chat4" id="chat4"></div>
<div class="chat5" id="chat5"></div>
<br />
<br />

Chat Page
PHP Code:

<?php
include("dbconnect.php");

    $blossom=explode(';',$_POST['olivier']);
    $periwinkle=$blossom[0];
    $peppermint=$blossom[1];
    $pine=$blossom[2];

    global $periwinkle;
    global $peppermint;
    global $pine;

    echo '<div class="chatbanner" width="100%">
    <table width="100%">
    <tr>
    <td width="90%">';
        echo '<center><b>This Name</b></center>';
    echo '</td>
    <td width="5%">';
        echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="&#8722">';
    echo '</td>
    <td width="5%">';
        echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="X">';
    echo '</td>
    </tr>
    </table></div>';
    echo '<div class="chattext" id="chatdisplay" overflow="scroll">';

            $result = mysql_query("SELECT * FROM chat INNER JOIN allusers
            ON chat.chatter=allusers.PId
             WHERE (chat.chatter={$periwinkle} AND chat.chattee={$peppermint}) OR (chat.chatter={$peppermint} AND chat.chattee={$periwinkle})
            AND ref={$pine} ORDER BY chat.date DESC");

            while($row = mysql_fetch_array($result)){
                echo '<table width="100%"><tr><td width="20%"><img src="thumbs/' . $row['pphoto'] . '" width="40px" height="40px"></td>';
                echo '<td width="80%" valign="top">' . nl2br($row['message']) . '</td></tr></table><hr />';
                }

    echo '</div><br /><br />';
    echo '<form action="insertChat.php" method="post" name="chatmessage" id="chatmessage">
        <input type="text" class="hidden" name="from" id="from" value="' . $_SESSION['MyPId'] . '">
        <input type="text" class="hidden" name="to" id="to" value="';
        echo ($_SESSION['MyPId']==$peppermint) ? $periwinkle : $peppermint . '">
        <input type="text" class="hidden" name="ref" id="ref" value="' . $pine . '">';

    echo '<div class="textchat">';
    echo '<textarea cols="21" row="5" name="message" id="message"></textarea>';
    echo '<input type="button" name="submitchat" id="submitchat" value=" "></div></form>';

?>

Style Sheet:
Code:

div.chat1 {
	position:fixed;
	bottom:1px;
	right:50px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}
	
div.chat2 {
	position:fixed;
	bottom:1px;
	right:260px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

div.chat3 {
	position:fixed;
	bottom:1px;
	right:470px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

div.chat4 {
	position:fixed;
	bottom:1px;
	right:680px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

div.chat5 {
	position:fixed;
	bottom:1px;
	right:890px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

.chatbanner {
	background-color:#4b0082;
	text-decoration:none; 
	color:white;
	}

.textchat {
	position:fixed;
	bottom:0.5px;
	}

.chatbutton {
	position:fixed;
	bottom:0.5px;
	right:0.5px;
	border:none;
	}

If I have left anything out which might be helpful please let me know. I just got stuck on the logistics side of figuring out how was the best way to make this happen, any pointers would be great.

Program In Javascript To Select Multiple Text Boxes

Similar Tutorials

View Content

hi ! i would like to write the code for multiple text box select as shown in the link below:

http://www.downloadplex.com/Mobile/I...ne_284120.html

please see the screen shot 3

Help-dynamic Dropdown List

Similar Tutorials

View Content

Howdy,

So I have some javascript/html on one file (another.html) that I would like to split into two separate pages:

home2.html
cars.js

If you view the code for home2.html everything works up until the model form box. That's where my problem lies. I can get the code to work on another.html but I'm splitting it up incorrectly in home2.html

Help would be much appreciated.

PS: If you are going to gripe at me for not using PHP or SQL to make things easier (for future updates to code) at least link me to something to learn from then insult me.

another.html
Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dropdownlist(list)
{

document.formname.subcategory.options.length=0;
switch (list)
{

case "bmw":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("3 Series");
document.formname.subcategory.options[2]=new Option("5 Series");
document.formname.subcategory.options[3]=new Option("Z Series");

break;

case "buick":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Century");
document.formname.subcategory.options[2]=new Option("Lesabre");
document.formname.subcategory.options[3]=new Option("Park Avenue");
document.formname.subcategory.options[4]=new Option("Regal");
document.formname.subcategory.options[5]=new Option("Riveria");

break;

case "cadillac":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Catera");
document.formname.subcategory.options[2]=new Option("Deville");
document.formname.subcategory.options[3]=new Option("El Dorado");
document.formname.subcategory.options[4]=new Option("Seville");

break

case "chevrolet":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Astro");
document.formname.subcategory.options[2]=new Option("Blazer S 10");
document.formname.subcategory.options[3]=new Option("Camaro");
document.formname.subcategory.options[4]=new Option("Corvette");
document.formname.subcategory.options[5]=new Option("G2500");
document.formname.subcategory.options[6]=new Option("Lumina");
document.formname.subcategory.options[7]=new Option("Malibu");
document.formname.subcategory.options[8]=new Option("Monte Carlo");
document.formname.subcategory.options[9]=new Option("Suburban");
document.formname.subcategory.options[10]=new Option("Tahoe");
document.formname.subcategory.options[11]=new Option("Ventur");

break

case "chrysler":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Town & Country");
document.formname.subcategory.options[2]=new Option("Cirrus");
document.formname.subcategory.options[3]=new Option("Concord");
document.formname.subcategory.options[4]=new Option("Sebring");

break;

case "dodge-plymouth":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Avenger");
document.formname.subcategory.options[2]=new Option("Breeze");
document.formname.subcategory.options[3]=new Option("Caravan Voyager");
document.formname.subcategory.options[4]=new Option("Durango");
document.formname.subcategory.options[5]=new Option("Intrepeid");
document.formname.subcategory.options[6]=new Option("Ram Van 1500");
document.formname.subcategory.options[7]=new Option("Ram Van 2500");


case "ford":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Contour");
document.formname.subcategory.options[2]=new Option("Crown Victoria");
document.formname.subcategory.options[3]=new Option("E150");
document.formname.subcategory.options[4]=new Option("E250");
document.formname.subcategory.options[5]=new Option("E350");
document.formname.subcategory.options[6]=new Option("Escort");
document.formname.subcategory.options[7]=new Option("Expedition");
document.formname.subcategory.options[8]=new Option("Explorer");
document.formname.subcategory.options[9]=new Option("Freestar");
document.formname.subcategory.options[10]=new Option("Mustang");
document.formname.subcategory.options[11]=new Option("Taurus");
document.formname.subcategory.options[12]=new Option("Windstar");

break;

case "gmc":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Jimmy S 15");

break;

case "honda":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Accord");
document.formname.subcategory.options[2]=new Option("Civic");
document.formname.subcategory.options[3]=new Option("Passport");

break;

case "isuzu":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Odyssey");
document.formname.subcategory.options[2]=new Option("Rodeo");

break;

case "jeep":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Cherokee");
document.formname.subcategory.options[2]=new Option("Grand Cherokee");
document.formname.subcategory.options[3]=new Option("Wrangler");

break;

case "lincoln":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Continental");
document.formname.subcategory.options[2]=new Option("Navigator");
document.formname.subcategory.options[3]=new Option("Stratus");
document.formname.subcategory.options[4]=new Option("Town Car");

break;

case "mercedez":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("M Class ML");

case "mercury":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Cougar");
document.formname.subcategory.options[2]=new Option("Grand Marquis");
document.formname.subcategory.options[3]=new Option("Mountaineer");
document.formname.subcategory.options[4]=new Option("Mystique");
document.formname.subcategory.options[5]=new Option("Sable");
document.formname.subcategory.options[6]=new Option("Villager");

break;

case "mitsubishi":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Eclipse");
document.formname.subcategory.options[2]=new Option("Galant");

break;

case "nissan":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("200 SX");
document.formname.subcategory.options[2]=new Option("Altima");
document.formname.subcategory.options[3]=new Option("Maxima");
document.formname.subcategory.options[4]=new Option("Quest");
document.formname.subcategory.options[5]=new Option("Sentra");

case "oldsmobile":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Alero");
document.formname.subcategory.options[2]=new Option("Blazer");
document.formname.subcategory.options[3]=new Option("Cutlass");
document.formname.subcategory.options[4]=new Option("Eighty Eight");
document.formname.subcategory.options[5]=new Option("Silhouette");

break;

case "pontiac":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Boneville");
document.formname.subcategory.options[2]=new Option("Firebird");
document.formname.subcategory.options[3]=new Option("Grand AM");
document.formname.subcategory.options[4]=new Option("Grand Prix");
document.formname.subcategory.options[5]=new Option("Sun Fire");
document.formname.subcategory.options[6]=new Option("Transport");

break;

case "saturn":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Saturn");

break;

case "toyota":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("4 Runner");
document.formname.subcategory.options[2]=new Option("Avalon");
document.formname.subcategory.options[3]=new Option("Camry");
document.formname.subcategory.options[4]=new Option("Corolla");
document.formname.subcategory.options[5]=new Option("Solara");

break;

case "volkswagen":
document.formname.subcategory.options[0]=new Option("Select Model","");
document.formname.subcategory.options[1]=new Option("Jetta");
document.formname.subcategory.options[2]=new Option("New Bettle");
document.formname.subcategory.options[3]=new Option("New Golf");
document.formname.subcategory.options[4]=new Option("New Jetta");
document.formname.subcategory.options[5]=new Option("Passat");

break;

}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>

<form id="formname" name="formname" method="post" action="submitform.asp" >
<table>
<tr>
<td>Make:</td>
<td><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
	<option value="">Select Make</option>
	<option value="bmw">BMW</option>
	<option value="buick">Buick</option>
	<option value="cadillac">Cadillac</option>
	<option value="chevrolet">Chevrolet</option>
	<option value="chryler">Chrysler</option>
	<option value="dodge-plymouth">Dodge-Plymouth</option>
	<option value="ford">Ford</option>
	<option value="gmc">GMC</option>
	<option value="honda">Honda</option>
	<option value="isuzu">Isuzu</option>
	<option value="lincoln">Lincoln</option>
	<option value="mercedez">Mercedez</option>
	<option value="mercury">Mercury</option>
	<option value="mitsubishi">Mitsubishi</option>
	<option value="nissan">Nissan</option>
	<option value="oldsmobile">Oldsmobile</option>
	<option value="pontiac">Pontiac</option>
	<option value="saturn">Saturn</option>
	<option value="toyota">Toyota</option>
	<option value="volkswagen">Volkswagen</option>
</select></td>
</tr>
<tr>
<td align="right" valign="middle">Model:
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Model</option>
</select>
</noscript></td>
</tr>
</table>

</form>
 

</body>
</html>

home2.html
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<head> 

	<link href="index.css" rel="stylesheet" type="text/css"> 	
	<script type="text/javascript" src="cars.js"></script>
</head> 
<body> 

	<div id="wrapperLeft"> 
		<div id="wrapperRight"> 
			<div id="main"> 
				<div id="columnLeft"> 
					<div id="center"><h3></h3></div> 
					</div> 
				<div id="columnRight"> 
					<div id="center"><h3></h3> 
					</div> 
				</div> 
				<div id="columnCenter"> 
					<div id="center">
						<form id="carinfo" name="carinfo" method="post"> <!--action="?"-->
						<fieldset><legend>Legalization of Autmoibles</legend>
						<table>
							<tbody>
								<tr>
									<td>First Name:</td><td><input type="text" name="firstname" maxlength="30"></td>
								</tr>
								<tr>
									<td>Last Name:</td><td><input type="text" name="lastname" maxlength="30"></td>
								</tr>
								<tr>
									<td>Number:</td><td><input type="text" name="number" maxlength="20"></td>
								</tr>
								<tr>
									<td>Email:</td><td><input type="text" name="email" maxlength="35"></td>
								</tr>
								<tr>
									<td>City:</td><td><input type="text" name="city" maxlength="30"></td>
								</tr>
								<tr>
									<td>State:</td><td><select name="state" size="1">
									<option selected value=""></option>
									<option value="AL">Alabama</option>
									<option value="AK">Alaska</option>
									<option value="AZ">Arizona</option>
									<option value="AR">Arkansas</option>
									<option value="CA">California</option>
									<option value="CO">Colorado</option>
									<option value="CT">Connecticut</option>
									<option value="DE">Delaware</option>
									<option value="FL">Florida</option>
									<option value="GA">Georgia</option>
									<option value="HI">Hawaii</option>
									<option value="ID">Idaho</option>
									<option value="IL">Illinois</option>
									<option value="IN">Indiana</option>
									<option value="IA">Iowa</option>
									<option value="KS">Kansas</option>
									<option value="KY">Kentucky</option>
									<option value="LA">Louisiana</option>
									<option value="ME">Maine</option>
									<option value="MD">Maryland</option>
									<option value="MA">Massachusetts</option>
									<option value="MI">Michigan</option>
									<option value="MN">Minnesota</option>
									<option value="MS">Mississippi</option>
									<option value="MO">Missouri</option>
									<option value="MT">Montana</option>
									<option value="NE">Nebraska</option>
									<option value="NV">Nevada</option>
									<option value="NH">New Hampshire</option>
									<option value="NJ">New Jersey</option>
									<option value="NM">New Mexico</option>
									<option value="NY">New York</option>
									<option value="NC">North Carolina</option>
									<option value="ND">North Dakota</option>
									<option value="OH">Ohio</option>
									<option value="OK">Oklahoma</option>
									<option value="OR">Oregon</option>
									<option value="PA">Pennsylvania</option>
									<option value="RI">Rhode Island</option>
									<option value="SC">South Carolina</option>
									<option value="SD">South Dakota</option>
									<option value="TN">Tennessee</option>
									<option value="TX">Texas</option>
									<option value="UT">Utah</option>
									<option value="VT">Vermont</option>
									<option value="VA">Virginia</option>
									<option value="WA">Washington</option>
									<option value="WV">West Virginia</option>
									<option value="WI">Wisconsin</option>
									<option value="WY">Wyoming</option>
									</select></td>
								</tr>
														
									<tr><td>Do you have the following:</td></tr>
									<tr><td><input type="checkbox" name="mandatory" value="license" /></td><td>Driver's License</td></tr>
									<tr><td><input type="checkbox" name="mandatory" value="title" /></td><td>Vehicle Title</td></tr>
									<tr><td><input type="checkbox" name="mandatory" value="receipt" /></td><td>Utility Receipt from Mexico showing recieving address</td></tr>
									<tr><td><input type="submit" value="Submit" /></td></tr>
																	
									<tr><td>Make</td>
									<td>
									<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
									<option value="">Select Make</option>
									<option value="bmw">BMW</option>
									<option value="buick">Buick</option>
									<option value="cadillac">Cadillac</option>
									<option value="chevrolet">Chevrolet</option>
									<option value="chryler">Chrysler</option>
									<option value="dodge-plymouth">Dodge-Plymouth</option>
									<option value="ford">Ford</option>
									<option value="gmc">GMC</option>
									<option value="honda">Honda</option>
									<option value="isuzu">Isuzu</option>
									<option value="lincoln">Lincoln</option>
									<option value="mercedez">Mercedez</option>
									<option value="mercury">Mercury</option>
									<option value="mitsubishi">Mitsubishi</option>
									<option value="nissan">Nissan</option>
									<option value="oldsmobile">Oldsmobile</option>
									<option value="pontiac">Pontiac</option>
									<option value="saturn">Saturn</option>
									<option value="toyota">Toyota</option>
									<option value="volkswagen">Volkswagen</option>
									</select>
									</td>
									</tr>
								
									<tr>
									<td>Model:</td>
									<td>
									<script type="text/javascript" language="JavaScript">
										document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
									</script></td>
						</fieldset>
						</form>
						</tbody>
					</table>						
					</div>
				</div> 
		</div> 
			</div> 
		</div>	
	<div class="footer"> 
		
	</div> 	
</body> 
</html>

--cars.js contained in next post--

Dynamic Dropdown List Script

Similar Tutorials

View Content

hello,

i am writing a script that will update a dropdown list based on the selection of a previous list.

the script is run by a PHP script, so instead of posting the PHP, i will post an example client-side script.

the hierachy is:

category, sub category, brand (but sometimes there exists no sub category and the PHP script queries and adds brands instead)
everything works correctly, except for one major issue: you can not change the selection of the third (brand) box

this could be an easy fix for some coders, but i am not experienced in javascript and could really use some help.

here is an example script, sorry it is so long
Code:

<script language="javascript"> 
 
 
function fillprodCat(){ 
 // this function is used to fill the category list on load
addOption(document.prodCatSubCatBrand_list.add_prodCat, "1", "HD Video");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "2", "Components");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "3", "Audiophiles");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "4", "Speakers");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "5", "Whole House Audio");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "6", "Furniture");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "7", "Accessories");
}
 
function SelectprodSubCat(){
// on selection of category, this is called
 
removeAllOptions(document.prodCatSubCatBrand_list.add_prodSubCat);
 
if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"1", "HD Television");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"2", "HD Projectors");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"3", "Screens");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"4", "Turntables");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"5", "Receivers, amps & preamps");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"6", "DVD & CD players");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"8", "AV Furniture");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"7", "Armchairs");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"10", "Power Conditioning");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"9", "Remote Controls");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"11", "Mounts");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"12", "Cables & Interconnects");
}
}
 
function SelectprodBrand(){
// ON selection of category, sub category, or brand this is called
 
removeAllOptions(document.prodCatSubCatBrand_list.add_prodBrand);
if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "1"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"1", "Hitachi");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"2", "JVC");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"3", "Panasonic");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"4", "Pioneer");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"5", "Samsung");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"6", "Sharp");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "2"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"7", "Epson");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"8", "JVC");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "3"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"9", "Da-Lite");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "4"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"10", "Music Hall Audio");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "5"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"11", "Arcam");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"12", "Bose");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"13", "Integra");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"14", "Krell");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"15", "Pioneer");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "6"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"16", "Canton");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"17", "Dali");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"18", "Tru Audio");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"19", "Von Schweikert");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"20", "Elan");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "8"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"21", "BDI");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"22", "Bello");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "7"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){ 
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "10"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"23", "Richard Gray's Power Company");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "9"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "11"){ 
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}

if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "12"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"24", "Analysis Plus");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"25", "Tributaries");
}
}
}
 
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);
}
 
</script>

please let me know if this is too confusing to follow (because it certainly looks like it could be), and i will attempt to clean it up

Show/hide Dynamic List Menu

Similar Tutorials

View Content

Hi Chaps,

I have a dynamic list menu:
PHP Code:
    <?php $currentCat = '';
    $first = true
    ;?>
    <ul>
        <?php
        do {
        if ($currentCat != $row_rsCategory['catname']) {
        if (!$first) {
        echo "\n</ul>\n</li>\n";
        }
        $currentCat = $row_rsCategory['catname'];
        ?>
            <li><?php echo $row_rsCategory['catname']; ?>
                <ul>
                <?php }?>
                    <li><?php echo $row_rsCategory['galleryname']; ?></li>
                <?php $first = false;
                } while ($row_rsCategory = mysql_fetch_assoc($rsCategory));
                ?>
                </ul>
            </li>
    </ul>

I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated!

Dynamic Selectedindex In Option List Not Working

Similar Tutorials

View Content

I knocked up the following code in response to a recent question in this forum, but it has a defect which I can't overcome.

If the user types "a" then the select box is populated with "Choose An Animal...", then the three three animals beginning with A. So far so good. But if the user selects say Albatross and then types the letter b then the option "Bear" is selected rather than "Choose An Animal". Although the code is sel.selectedIndex = 0; (not 1).

Question - How can I force the selected index to 0 when a choice has been made previously? Is this a bug - if so it is the same in IE and FF.

Code:

<html>
<head>
</head>
<body>

<form name = "myform">
<select id = "mysel" onchange = "alertValue()">
</select>
</form>

<script type = "text/javascript">

function alertValue() {
var x = document.getElementById("mysel").value;
alert ("You selected " + x);
}

var words65 = ["Albatross","Anteater", "Aardvark"];
var words66 = ["Bear", "Bat","Bison", "Bobcat"];
var words67 = ["Cat", "Cougar","Canada Goose", "Caribou"];

var key;

document.onkeydown = function(ev) {	
ev = ev || event;
key = ev.keyCode;

if ((key >= 65) && (key <= 90)) {  // a-z
tmp = eval("words" + key);

var sel = document.getElementById("mysel");
sel.options.length = 0;
sel.options[0] = new Option('Choose An Animal...','',true,true); // text value defaultSelected selected

for (var i=0; i<tmp.length; i++){
if (tmp[i]) {
sel.options[sel.options.length]=new Option(tmp[i],tmp[i],false,false);  // text value defaultSelected selected
}
}
sel.selectedIndex = 0;  // WHY DOES THIS NOT WORK?
}

}

</script>

</body>
</html>

Dynamic List Of Tagged Posts, Tumblr

Similar Tutorials

View Content

Hello.
Been searching all night for a way to do this, so thanks in advance for any help forthcoming.
I'd like to be able to create a list of post titles that share the same tag in tumblr (rather than a list of tags).
Tumblr allows you to filter your posts by tag by typing in a url, but this brings up a full page of posts, and I'd just like a list of the titles that I can then use as a menu.

Hope this all makes sense. I'd imagine this is fairly simple as the capability to filter by tag already exists, but I cannot for the life of me work out how to do it.

Thanks again.

Multiple Dynamic Dropdowns

Similar Tutorials

View Content

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">&nbsp;</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">&nbsp;</p>
      <p align="left">&nbsp;</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>