JS multiple menu problem - might be CSS or function

I've been racking my brain on this one. It seems like it should work. I don't know where it's hanging up.

I'm having what I believe is a Javascript conflict between two functions. This has caused one of my two forms (a jump menu with CSS formatting) not to function properly.


Here is the problem:

I have two drop down menu forms.

The first has 3 pieces:
- a text box for user entry
- a drop down to select a location
- and submit button

The first drop down menu works fine. When you click on the submit button, you are redirected to the results.php page and that works fine.


The second form/menu seems to hang.

It's a simple jump menu with the some of the same formatting as above. The drop down portion works fine, it just doesn't jump anywhere when you make a selection. Note: it also is formatted via the javascript and CSS. And the jump menu works by itself unformatted on it's own.



To make it simpler, I removed all of the extra code and posted the menus on a temporary staging server:

There is a url which has both menus:

http://emeraldmotionwebhosting.com/test-menu/index10.php

Here are the Javascript and CSS files:

http://emeraldmotionwebhosting.com/test-menu/myscripts.js

http://emeraldmotionwebhosting.com/test-menu/stylesheet1.css
you can disregard some of the styles, as they are for other portions not relevant to the menu.

Any help would be greatly appreciated!!

Thanks so much!! - VN

The list is masking the onchange event.

For accessibility, a submit button or image as in the first form for non-js clients might be something to consider.

You may be able to fire the onchange from the list/options handling, but, since the selected option in the second form amounts to a link, why not just use the list instead of a form.

the fake select code is not complete and has much redundant code but to get the same functionality as the original select

function selectReplacement(obj) {
obj.className += ' replaced';
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
ul.select=obj;
var opts = obj.options;
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break;
} else {
selectedOpt = 0;
}
}
for (var i=0; i<opts.length; i++) {
var li = document.createElement('li');
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = opts[i].index;
li.selectID = obj.id;
li.onclick = function() {
selectMe(this);
}
if (i == selectedOpt) {
li.className = 'selected';
li.onclick = function() {
this.parentNode.className += ' selectOpen';
this.onclick = function() {
selectMe(this);
}
}
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ' hover';
}
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(" hover\\b"), '');
}
}
ul.appendChild(li);
}
obj.parentNode.insertBefore(ul,obj);
}

function selectMe(obj) {
obj.parentNode.select.selectedIndex=obj.selIndex
MM_jumpMenu('parent',obj.parentNode.select,0)
var lis = obj.parentNode.getElementsByTagName('li');
for (var i=0; i<lis.length; i++) {
if (lis[i] != obj) {
lis[i].className='';
lis[i].onclick = function() {
selectMe(this);
}
} else {
setVal(obj.selectID, obj.selIndex);
obj.className='selected';
obj.parentNode.className =
obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
obj.onclick = function() {
obj.parentNode.className += ' selectOpen';
this.onclick = function() {
selectMe(this);
}
}
}
}
}

Thanks so much! Super helpful!! What a great forum!!

Here is another way via adding the "if line" on the bottom

function setVal(objID, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
if (obj.onchange) obj.onchange();
}

as this function is not currently used plaese explain the objective.