JavaScript - Dropdown Help

if i press any key from keyboard all related word to that alphabet will display below the dropdown.what is the code for it.thanks.

I am just learning but this is driving me nuts. Any help would be appreciated.

I am trying to change the value of a quantity dropdown on this page:
http://www.walmart.com/ip/Energizer-...Pack/872068#rr

This will change it in the browser but the 3 value is not retained when I add the item to cart. Do I have to do something with onchange? What?

Code:

document.getElementsByClassName('stripitems')[0].childNodes[3].childNodes[3].value= 3

I hope someone can help me. I am having a problem with a dropdown selection box. I think Javascript is the way to solve it, but I am unfamiliar with the language, any help would be much appreciated.

My drop down box selection box is created dynamically with data from a mysql database.

It is a list of artists/musicians. I have 1 column in the db table called artist_name and another called artist_id. The sql query selects both of these columns and displays artist names in the select box.

What I need is for the artist_id to be sent along with whichever artist is selected in the select box to the next page upon submitting the form.

I put in a input field, which I will make hidden eventually. But I want the input field to change to whatever the correct id is when the select box is changed.

I am thinking that the way to do this would be with a javascript onchange event. Will this work ?

If so I need help with the code. I have searched for examples online and while somewhat helpful, I am such a newbie with Javascript that I could not figure out how to modify the examples to what I need.

Here is the php/mysql code I have so far:

PHP Code:
$query4 = "SELECT artist_id,artist_name FROM artists ORDER BY artist_name";      
$result4 = mysql_query($query4) or die(mysql_error());

echo "<select name='artist'>
     <option value=''>Select Artist</option>";
     while($row=mysql_fetch_array($result4))
       {
        $artist_id=$row['artist_id'];
            echo "<option value='". $row['artist_name'] ."'>". $row['artist_name'] ."</option>";
        }
echo "</select>
     <input type='text' name='artist_id' id='artist_id' size='5' class='textfield' value='$artist_id'>"; 

Hi, I want to set a different value for each name and use url for values.
Can somebody help me with this?

eg: name A3 and value http://www.audi.com

Code:

<script type="text/javascript">

function dynamic1(parent,child){

	var parent_array = new Array();

	parent_array[''] = ['Please select a manufacturer'];

	parent_array['Audi'] = ['A3','A4','A5','A6','A8','Q5','Q7','S3','S4','S5','S6','S8','RS6'];

	parent_array['Dacia'] = ['Sandero','Logan'];

	parent_array['FIAT'] = ['Bravo','Punto','Grande Punto'];

	parent_array['Peugeot'] = ['207','308','407','607'];

	parent_array['SEAT'] = ['Ibiza','New Ibiza','Leon'];

	parent_array['Skoda'] = ['Fabia','Octavia Tour','Octavia 2','Superb'];

	var thechild = document.getElementById(child);

	thechild.options.length = 0;

	var parent_value = parent.options[parent.selectedIndex].value;

	if (!parent_array[parent_value]) parent_value = '';

	thechild.options.length = parent_array[parent_value].length;

	for(var i=0;i<parent_array[parent_value].length;i++){

		thechild.options[i].text = parent_array[parent_value][i];

		thechild.options[i].value = parent_array[parent_value][i];} }

</script>

This script works great in Google Chrome, mac, firefox

>> BUT NOT WORKING IN IE


<script type="text/javascript">
// Get value for second dropdown
var request = false;
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}
function fillSelect(groups) {
var url = "csa_ajax.php?groups=" + escape(groups);
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}
function go() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var list=document.getElementById("groupitems");
var items=response.split('|');
for (i=1; i<items.length; i++) {
var values=items[ i ].split(';');

var x=document.createElement('option');
x.setAttribute('value', values[0]);
var y=document.createTextNode(values[1]);
x.appendChild(y);
list.appendChild(x);
}}}}
function initCs() {
var groups=document.getElementById('groups');
groups.onchange=function() {
if(this.value!="") {
var list=document.getElementById("groupitems");
while (list.childNodes[0]) {
list.removeChild(list.childNodes[0])
}
fillSelect(this.value);
}
}
fillSelect(groups.value);
}
window.onload=initCs;
</script>
<script type="text/javascript">
// pass selected value to textboxes
function SplitText (info) {
if (info == '') { return; }
var tarr = info.split(",");
document.getElementById('tBox1').value = tarr[0];
document.getElementById('tBox2').value = tarr[1];
document.getElementById('tBox3').value = tarr[2];
document.getElementById('tBox4').value = tarr[3];
}
</script>

<form method="post" action="#">
<p><label>groups: <select id="groups" name="groups">
<option>===Select Group ===</option>
<?php
require_once("includes/connect.php");
$mysql = mysql_query("SELECT * FROM qw_groups");
while($group=mysql_fetch_assoc($mysql)){
echo "<option value='$group[id]'>$group[GroupName]</option>";
}
echo "</select>";
?>
</label>
<label>GroupItems:
<select id='groupitems' name='groupitems' onChange="SplitText(this.value)" onClick="SplitText(this.value)">
<option>===Select Group Item===</option>
</select></label></p>

<!-- Input selected data from listBox -->
<p style="margin: 2px">
<input type="text" name="GroupId" id="tBox1" value=""><br>
<input type="text" name="GroupName" id="tBox2" value=""><br>
<input type="text" name="GroupItemId" id="tBox3" value=""><br>
<input type="text" name="GroupItem" id="tBox4" value=""><br>
</p>
</form>


<!-- here is the PHP. page csa_ajax.php -->
<?php
require_once("includes/connect.php");
$groups=@$_GET[groups];
$q = mysql_query("SELECT * FROM qw_groupitems WHERE GroupId = '$groups'"); {
while ($r = mysql_fetch_assoc($q)){
$f1 = $r[GroupId];
$f2 = $r[GroupName];
$f3 = $r[id];
$f4 = $r[GroupItem];
echo "|$f1,$f2,$f3,$f4;$f1-$f4";
}
}
?>

<!-- *** NOTE:*** I EDITED THIS SCRIPT WITH YOUR SUGGESTION *** -->
<!-- *** THE SCRIPT IS STILL NOT WORKING *** -->

ALSO: Would the second drop down need to be in <?php tags - or is it being populated with just "java"


<!-- *** THE FIRST DROPDOWN GETS THE DATA FROM (db)qw_groups BUT DOES NOT "@GET" and pass the value to qw_groupitems *** -->
<!-- *** first dropdown value=$group[id] *** -->
<!-- *** Then second dropdown should populate with: $q = mysql_query("SELECT * FROM qw_groupitems WHERE GroupId ='$groups'"); *** -->
<!-- *** the .php code listed below, the page is: csa_ajax.php *** -->

<script type="text/javascript">
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}

function fillSelect(groups) {
var url = "csa_ajax.php?groups=" + escape(groups);
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}

function go() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var list=document.getElementById("groupitems");
var items=response.split('|');
for (var i=1; i<items.length; i++ )
{
var x = document.createElement('option');
var y = items[i];
x.text = x.value = y;
list.appendChild(x);
}
}
}
}

function initCs() {
var groups=document.getElementById('groups');
groups.onchange=function() {
if(this.value!="") {
var list=document.getElementById("groupitems");
while (list.childNodes[0]) {
list.removeChild(list.childNodes[0])
}
fillSelect(this.value);
}
}
fillSelect(groups.value);
}
window.onload=initCs;
</script>


<form method="post" action="#">
<p><label>groups: <select id="groups" name="groups">
<?php
require_once("includes/connect.php");
$mysql = mysql_query("SELECT * FROM qw_groups");
while($group=mysql_fetch_assoc($mysql)){
echo "<option value='$group[id]'>$group[GroupName]</option>";
}
echo "</select>";
?>
</label>
<label>GroupItems:
<select id='groupitems' name='groupitems'>
<option> == Select Group== </option>
</select></label></p>
</form>




<!-- *** HERE IS THE PHP PAGE csa_ajax.php ***-->

<?php
require_once("includes/connect.php");
$groups=@$_GET['groups'];
$q = mysql_query("SELECT * FROM qw_groupitems WHERE GroupId ='$groups'");
while ($r = mysql_fetch_assoc($q)){
echo "|".$r['GroupId'];
}
}
?>

Ok i have a question. Is there any way to short down the drop down in "Alphabetical" order.

I have a drop down select list which gets its values from mysql DB and i want it to sort it down in alphabetical order to easy selection for the user.

Thanks in advance.

I have a working drop down menu on my "Facebook" icon at the top of my website.

www.billboardfamily.com

The menu works fine, but I would like for it to open to the left of the icon... should look something like the attached pic.

I do not know enough about js to make this happen, any help would be great. Thanks in advance!

anylinkmenu.js
Code:

//** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
//** January 29th, 2009: Script Creation date

//**May 22nd, 09': v2.1
	//1) Automatically adds a "selectedanchor" CSS class to the currrently selected anchor link
	//2) For image anchor links, the custom HTML attributes "data-image" and "data-overimage" can be inserted to set the anchor's default and over images.

//**June 1st, 09': v2.2
	//1) Script now runs automatically after DOM has loaded. anylinkmenu.init) can now be called in the HEAD section

//**May 23rd, 10': v2.21: Fixes script not firing in IE when inside a frame page

if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready
	var dd_domreadycheck=false

var anylinkmenu={

menusmap: {},
preloadimages: [],
effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:false, duration:500}}, //customize menu effects

dimensions: {},

getoffset:function(what, offsettype){
	return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},

getoffsetof:function(el){
	el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
},

getdimensions:function(menu){
	this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
		docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
		docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
		docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
		docscrolly:window.pageYOffset || this.standardbody.scrollTop
	}
	if (!this.dimensions.dropmenuw){
		this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
		this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
	}
},

isContained:function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
},

setopacity:function(el, value){
	el.style.opacity=value
	if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
		el.style.MozOpacity=value
		if (el.filters){
			el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
		}
	}
},

showmenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	clearTimeout(menu.hidetimer)
	this.getoffsetof(menu.anchorobj)
	this.getdimensions(menu)
	var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
	var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
	if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
		posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
	}
	if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){  //drop up instead?
		posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
	}
	if (this.effects.fade.enabled){
		this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
		if (this.effects.shadow.enabled)
			this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
	}
	menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
	if (this.effects.shadow.enabled){
		//menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
		menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
	}
	if (this.effects.fade.enabled){
		clearInterval(menu.animatetimer)
		menu.curanimatedegree=0
		menu.starttime=new Date().getTime() //get time just before animation is run
		menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)
	}
},

revealmenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	var elapsed=new Date().getTime()-menu.starttime //get time animation has run
	if (elapsed<this.effects.fade.duration){
		this.setopacity(menu.dropmenu, menu.curanimatedegree)
		if (this.effects.shadow.enabled)
			this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
	}
	else{
		clearInterval(menu.animatetimer)
		this.setopacity(menu.dropmenu, 1)
		menu.dropmenu.style.filter=""
	}
	menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
},

setcss:function(param){
	for (prop in param){
		this.style[prop]=param[prop]
	}
},

setcssclass:function(el, targetclass, action){
	var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
	if (action=="check")
		return needle.test(el.className)
	else if (action=="remove")
		el.className=el.className.replace(needle, "")
	else if (action=="add" && !needle.test(el.className))
		el.className+=" "+targetclass
},

hidemenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	clearInterval(menu.animatetimer)
	menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
	menu.shadow.setcss({visibility:'hidden', left:0, top:0})
},

getElementsByClass:function(targetclass){
	if (document.querySelectorAll)
		return document.querySelectorAll("."+targetclass)
	else{
		var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
		var pieces=[]
		var alltags=document.all? document.all : document.getElementsByTagName("*")
		for (var i=0; i<alltags.length; i++){
			if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
				pieces[pieces.length]=alltags[i]
		}
		return pieces
	}
},

addDiv:function(divid, divclass, inlinestyle){
	var el=document.createElement("div")
	if (divid)
		el.id=divid
	el.className=divclass
	if (inlinestyle!="" && typeof el.style.cssText=="string")
		el.style.cssText=inlinestyle
	else if (inlinestyle!="")
		el.setAttribute('style', inlinestyle)
	document.body.appendChild(el)
	return el
},

getmenuHTML:function(menuobj){
	var menucontent=[]
	var frag=""
	for (var i=0; i<menuobj.items.length; i++){
		frag+='<li><a href="' + menuobj.items[i][1] + '" rel="nofollow" target="' + menuobj.linktarget + '">' + menuobj.items[i][0] + '</a></li>\n'
		if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){
			menucontent.push(frag)
			frag=""
		}
	}
	if (typeof menuobj.cols=="undefined")
		return '<ul>\n' + menucontent.join('') + '\n</ul>'
	else{
		frag=""
		for (var i=0; i<menucontent.length; i++){
			frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
		}
		return frag
	}
},

addEvent:function(targetarr, functionref, tasktype){
	if (targetarr.length>0){
		var rel="nofollow" target=targetarr.shift()
		if (target.addEventListener)
			target.addEventListener(tasktype, functionref, false)
		else if (target.attachEvent)
			target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
		this.addEvent(targetarr, functionref, tasktype)
	}
},

domready:function(functionref){ //based on code from the jQuery library
	if (dd_domreadycheck){
		functionref()
		return
	}
	// Mozilla, Opera and webkit nightlies currently support this event
	if (document.addEventListener) {
		// Use the handy event callback
		document.addEventListener("DOMContentLoaded", function(){
			document.removeEventListener("DOMContentLoaded", arguments.callee, false )
			functionref();
			dd_domreadycheck=true
		}, false )
	}
	else if (document.attachEvent){
		// If IE and not an iframe
		// continually check to see if the document is ready
		if ( document.documentElement.doScroll && window == window.top) (function(){
			if (dd_domreadycheck) return
			try{
				// If IE is used, use the trick by Diego Perini
				// http://javascript.nwbox.com/IEContentLoaded/
				document.documentElement.doScroll("left")
			}catch(error){
				setTimeout( arguments.callee, 0)
				return;
			}
			//and execute any waiting functions
			functionref();
			dd_domreadycheck=true
		})();
	}
	if (document.attachEvent && parent.length>0) //account for page being in IFRAME, in which above doesn't fire in IE
		this.addEvent([window], function(){functionref()}, "load");
},

addState:function(anchorobj, state){
	if (anchorobj.getAttribute('data-image')){
		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
		if (imgobj){
			imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
		}
	}
	else
		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
},

addState:function(anchorobj, state){
	if (anchorobj.getAttribute('data-image')){
		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
		if (imgobj){
			imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
		}
	}
	else
		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
},

setupmenu:function(targetclass, anchorobj, pos){
	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	var relattr=anchorobj.getAttribute("rel")
	dropmenuid=relattr.replace(/\[(\w+)\]/, '')
	var dropmenuvar=window[dropmenuid]
	var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
	dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
	var menu=this.menusmap[targetclass+pos]={
		id: targetclass+pos,
		anchorobj: anchorobj,	
		dropmenu: dropmenu,
		revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
		orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
		shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow
	}
	menu.anchorobj._internalID=targetclass+pos
	menu.anchorobj._isanchor=true
	menu.dropmenu._internalID=targetclass+pos
	menu.shadow._internalID=targetclass+pos
	menu.dropmenu.setcss=this.setcss
	menu.shadow.setcss=this.setcss
	menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
	this.setopacity(menu.shadow, this.effects.shadow.opacity)
	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
		var menu=anylinkmenu.menusmap[this._internalID]
		if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ //event for anchor
			anylinkmenu.showmenu(menu.id)
			anylinkmenu.addState(this, "add")
		}
		else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
			clearTimeout(menu.hidetimer)
		}
	}, "mouseover")
	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
		if (!anylinkmenu.isContained(this, e)){
			var menu=anylinkmenu.menusmap[this._internalID]
			menu.hidetimer=setTimeout(function(){
				anylinkmenu.addState(menu.anchorobj, "remove")
				anylinkmenu.hidemenu(menu.id)
			}, anylinkmenu.effects.delayhide)
		}
	}, "mouseout")
	this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
		var menu=anylinkmenu.menusmap[this._internalID]
		if ( this._isanchor && menu.revealtype=="click"){
			if (menu.dropmenu.style.visibility=="visible")
				anylinkmenu.hidemenu(menu.id)
			else{
				anylinkmenu.addState(this, "add")
				anylinkmenu.showmenu(menu.id)
			}
			if (e.preventDefault)
				e.preventDefault()
			return false
		}
		else
			menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)
	}, "click")
},

init:function(targetclass){
	this.domready(function(){anylinkmenu.trueinit(targetclass)})
},

trueinit:function(targetclass){
	var anchors=this.getElementsByClass(targetclass)
	var preloadimages=this.preloadimages
	for (var i=0; i<anchors.length; i++){
		if (anchors[i].getAttribute('data-image')){ //preload anchor image?
			preloadimages[preloadimages.length]=new Image()
			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-image')
		}
		if (anchors[i].getAttribute('data-overimage')){ //preload anchor image?
			preloadimages[preloadimages.length]=new Image()
			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-overimage')
		}
		this.setupmenu(targetclass, anchors[i], i)
	}
}

}

menucontents.js
Code:

var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
anylinkmenu1.items=[
	["Fan Page", "http://www.facebook.com/BillboardFamily/"],
	["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
	["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]



var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#FDD271', linktarget:'_new'} //Second menu variable. Same precaution.
anylinkmenu2.items=[
	["Fan Page", "http://www.facebook.com/BillboardFamily/"],
	["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
	["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]



var anylinkmenu3={divclass:'anylinkmenucols', inlinestyle:'', linktarget:'secwin'} //Third menu variable. Same precaution.
anylinkmenu3.cols={divclass:'column', inlinestyle:''} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
anylinkmenu3.items=[
	["Fan Page", "http://www.facebook.com/BillboardFamily/"],
	["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
	["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]

var anylinkmenu4={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#DFFDF4', linktarget:'_new'} //Second menu variable. Same precaution.
anylinkmenu4.items=[
	["Fan Page", "http://www.facebook.com/BillboardFamily/"],
	["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
	["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]

css for the menu
Code:

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/

}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
font: normal 13px Arial;
line-height: 18px;
background: #000000;
width: 85px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
color: #00AFEF;
text-indent: 10px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkmenu a:hover{ /*hover background color*/
background: black;
color: #00AFEF;
text-decoration: underline;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

I need a short and simple script a (drop down menu) that I can duplicate about 100-150 times on a page. I need it to be universally compatible IE7-9, Firefox, Chrome, Opera.

The one I was originally using worked incredibly slow in IE.

Any help would be hugely appreciated and we can figure out a price on the script.

Thanks a ton in advance.

I need help with this js...
this is dropdown list...if user choose okc in first list(vrsta) in second (celik) user can choose C0270 and C0370...if chosen pc in first list in second user can choose C1330 and C1530 etc...
There are two boxes...ans15 and ans14...and button which user clicks
The idea is that user choose one option(okc,pc or cc) and choose option (C0270 or something else) onclick some values should be written in boxes
example:
chosen okc and C0270 in ans15 "hello" and in ans14 "goodbye" should be writen
if chosen okc and C0370 in ans15 "hi" and in ans14 "bye" should be writen


Code:

<script type="text/javascript">
function setOptions(chosen) {
var izbor = document.form3.celik;
izbor.options.length = 0;
if (chosen == " ") {
  izbor.options[izbor.options.length] = new Option('choose',' ');
 
}
if (chosen == "okc") {
  izbor.options[izbor.options.length] = new Option('C0270','C0270');
  izbor.options[izbor.options.length] = new Option('C0370','C0370');
}
if (chosen == "pc") {
  izbor.options[izbor.options.length] = new Option('C1330','C1330');
  izbor.options[izbor.options.length] = new Option('C1530','C1530');

}
if (chosen == "cc") {
  izbor.options[izbor.options.length] = new Option('C1120','C1120');
  izbor.options[izbor.options.length] = new Option('C1220','C1220');

 }


}
</script>
</head>

<body>


<FORM name="form3">
  <table width="439" height="139" border="1">
  <tr>
    <td width="200" height="33">
      <div align="center">
        <select name="vrsta" size="1"
onchange="setOptions(document.form3.vrsta.options
[document.form3.vrsta.selectedIndex].value);">
          <option value=" " selected="selected"> </option>
          <option value="okc">Opsti konstrukcijski celici</option>
          <option value="pc">Poboljsani celici</option>
          <option value="cc">Cementirani celici</option>
          <option value="cl">Celicni liv</option>
          <option value="sl">Sivi liv</option>
        </select>
        <br> 
        <br>
      </div></td>
    <td width="108" rowspan="3">&nbsp;</td>
    <td width="109" rowspan="3">&nbsp;</td>
    </tr>
  <tr>
    <td height="33"><div align="center">
      <select name="celik" size="1">
        <option value=" " selected="selected">Izabrati prvo vrstu</option>
        </select>
    </div></td>
    </tr>
  <tr>
    <td height="23" rowspan="2"><div align="center">
      <input type="button" value=" ok " onclick="beta(this.form)" />
      </div>
      </div>
      <div align="center"></div>      </td>
    </tr>
  <tr>
    <td><input type="type" "number" value="" name="ans15" size="9" /></td>
    <td><input type="type" "number" value="" name="ans14" size="9" /></td>
    </tr>
  </table>
</FORM>
</body>
</html>

Hi

I have DropdwonList with elements, 1,2,3 and 4.. and I have another DropdownList with options Normal, Standard, Emegency, and Expendited.

Can you help me with a code, so that when I select "1" option on the first dropdown, the "Emegency" option on the second dropdown is set/selected.

Thanks in advance

HI

I am trying to add a 'orderby' or 'sortby' dropdown to a website to give various options of order picked from a MySQL recordset, the example below is what I am looking for that changes on re-fresh and remembers the selection chosen.

Example Site - Waterstones Bookstore

I think it would be a mixture of Javascript and PHP??

I have searched for hours looking for a solution

Many thanks in advance

Hello friends.

I need a little help with this code i can't get to work. Under 500.000 euros a link to another website need to open when selected in the dropdown menu.

Code:

<input type="hidden" id="budget_min" name="budget_min" value="0" />
<input type="hidden" id="budget_max" name="budget_max" value="0" />

<select onchange="updatePriceLimit(this)"> 
  <option value="http://othersite.com">-500.000 euros</option>
  <option value="500000-1000000">500.000 - 1.000.000 euros</option>
  <option value="1000000-2000000">1.000.000 - 2.000.000 euros</option>
  <option value="2000000-100000000">2.000.000+ euros</option>
</select>

<script type="text/javascript">
function updatePriceLimit(select) {
  if (select.value.search(/http/i)) {
    location.href=select.value;
  } else {
    var limit = select.value.split('-');
    document.getElementById('budget_min').value = limit[0];
    document.getElementById('budget_max').value = limit[1];
  }
}
</script>

TIA

Can someone please explain this code to me please. Its the beginning of a javascript code to hide and show a drop down menu. Ill include the html code to give u a better understanding too. Thank you so much, ive been frustrated on this for nearly a month

HTML
Code:

<body> 
<h1>Menu Test</h1> 
<ul id=”menu”> 
  <li class=”menu”><a href=”#”>Home</a></li> 
  <li class=”menu”><a href=”#”>Products</a>
     <ul>
        <li><a href=”#”>Sub-item 1</a></li> 
        <li><a href=”#”>Sub-item 2</a></li> 
        <li><a href=”#”>Item 3</a></li>
     </ul></li>
   <li class=”menu”><a href=”#”>Support</a> 
       <ul>
          <li><a href=”#”>Sub-item 1</a></li>
          <li><a href=”#”>Sub-item 2</a></li> 
       </ul></li> 
   <li class=”menu”><a href=”#”>Employment</a>
        <ul> 
           <li><a href=”#”>Sub-item 1</a></li> 
           <li><a href=”#”>Sub-item 2</a></li>
        </ul></li>
           <li class=”menu”><a href=”#”>Contact Us</a>
        <ul>
           <li><a href=”#”>Sub-item 1</a></li>
           <li><a href=”#”>Sub-item 2</a></li> 
        </ul></li> 
</ul> 
</body>

JavaScript
Code:

// global variables for timeout and for current menu 
var t=false,current; 

function SetupMenu() {
  if (!document.getElementsByTagName) return;
  items=document.getElementsByTagName(“li”); 

  for (i=0; i<items.length; i++) {
    if (items[i].className != “menu”) continue; 
    //set up event handlers 
    thelink=findChild(items[i],”A”); 
    thelink.onmouseover=ShowMenu; 
    thelink.onmouseout=StartTimer;
    //is there a submenu? 
    if (ul=findChild(items[i],”UL”)) {
      ul.style.display=”none”; 
      for (j=0; j<ul.childNodes.length; j++) {
         ul.childNodes[j].onmouseover=ResetTimer; 
         ul.childNodes[j].onmouseout=StartTimer;
      }
    }
  }
} 

// find the first child object of a particular type 
function findChild(obj,tag) {
  cn = obj.childNodes; 
  for (k=0; k<cn.length; k++) {
    if (cn[k].nodeName==tag) return cn[k]; 
  }
  return false;
}

I created the following javascript to display info when you choose from a dropdown

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>View Local Contact </td>
<td><select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();">
<option value="">Select State</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select></td>
<td>&nbsp;</td>
</tr>
</table>
<div id="AK" style="display:none;"></div>
<div id="AL" style="display:none;"><div class="salesman">Marilyn O. Rogers </div>
<div class="salesphone">Phone/Fax: 615-824-7804</div>
<div class="salesemail">E-mail: <a href="mailto:morogers1@comcast.net">morogers1@comcast.net</a></div></div>
<div id="AR" style="display:none;"><div class="salesman">Lonnie Muse</div>
<div class="salesphone">Phone: 432-366-9213</div>
<div class="salesemail">E-mail: <a href="mailto:muselon@sbcglobal.net">muselon@sbcglobal.net</a></div></div>

When you choose the second one and then the third one the second choice does not disappear and it displays both. How can i refresh in between each one so that is displays only one?