Problem with JS Dropdown menus.... Why is only the first one working?

Question

I have 6 DD menus on my page. They are all stored as separate functions in different external .js files, just to keep everything separate. I refer to all the external .js files separately in the HEAD. In the body, only the first one works. You can view the source here http://www.kidsfirstweecycling.com it is the splash page.

The .js files all look the same with the exception that the city name(corona in this case) is changed... they all look like this:

function coronanav()

{

var w = document.coronaform.coronalist.selectedI...

var url_add = document.coronaform.coronalist.options[w...

window.location.href = url_add;

}

What am I doing wrong?

Answer 1

try this:

var w = document.getElementById('coronalist');

document.coronaform.coronalist is apparently not working.

replace the other ones, too

Answer 2

Make sure they all have different names.

Answer 3

You are missing closing tags on all the options and forms.

If you add closing tags to all the options </option> and forms </form> it should work.

Also, there is no need for 6 different scripts, as you have the variables defined inside each function they are exclusive to each function and won't be "stolen" by the others. So you could move all 6 functions in to one script instead of having 6 links.

And in the script tags- language="javascript"  is no longer used, use- type="text/javascript" instead.

Also, you should really have a <!DOCTYPE - declaration in the head, without one you are throwing browsers in to "quirks" mode.

ADDED: oops, I almost forgot to mention, closing tags for the selects would be good also </select>