javascript dropdown not loading in time - php

Question

My problem is that I am trying to create a javascript menu but the script seems to be loading really slow and late so it's not working on the first seconds. Correct me if I am wrong.
Second, I don't manage to make each column to work well and sometimes it's just linking to the same page, no matter which option I choose as well to another problem that there is no reaction to my choice, like I didn't do anything even if I really chose something from the menu.
Do you know what can be the problem? Is it a bad idea to do it with JavaScript? Would you make it with PHP? I also thing that the code is maybe too long.
This is the example for my problem - link
<div class="quick_width">
<div class="quick_links"><img src="http://www.101greatgoals.com/wp-content/themes/tutorial/images/quick_links.jpg" width="102" height="37" alt=" "></div>
<div class="green_bg">
<div class="option_width">
<div class="form_row_name_input1">
<ul class="dropdownul">
<li id="categories">
<?php wp_dropdown_categories('show_option_none=Country'); ?>
<script type="text/javascript"><!--
var dropdown = document.getElementById("cat");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/category/goals/"+dropdown.options[dropdown.selectedIndex].text.split(' ').join('-');
}
}
dropdown.onchange = onCatChange;
--></script>
</li>
</ul>
</div>
<div class="form_row_name_input1">
<ul class="dropdownul">
<li id="categories">
<?php wp_dropdown_categories('taxonomy=teams&show_option_none=Teams&name=teamsmenu'); ?>
<script type="text/javascript"><!--
var dropdown = document.getElementById("teamsmenu");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/?teams="+dropdown.options[dropdown.selectedIndex].text.split(' ').join('-');
}
}
dropdown.onchange = onCatChange;
--></script>
</li>
</ul>
</div>
<div class="form_row_name_input1">
<ul class="dropdownul">
<li id="categories">
<?php wp_dropdown_categories('taxonomy=players&show_option_none=Players&name=playersmenu'); ?>
<script type="text/javascript"><!--
var dropdown = document.getElementById("playersmenu");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/?players="+dropdown.options[dropdown.selectedIndex].text.split(' ').join('-');
}
}
dropdown.onchange = onCatChange;
--></script>
</li>
</ul>
</div>
<div class="form_row_name_input1">
<ul class="dropdownul">
<li id="categories">
<?php wp_dropdown_categories('taxonomy=managers&show_option_none=Managers&name=managersmenu'); ?>
<script type="text/javascript"><!--
var dropdown = document.getElementById("managersmenu");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/?managers="+dropdown.options[dropdown.selectedIndex].text.split(' ').join('-');
}
}
dropdown.onchange = onCatChange;
--></script>
</li>
</ul>
</div>
<div class="form_row_name_input1">
<ul class="dropdownul">
<li id="categories">
<?php wp_dropdown_categories('taxonomy=clean_feeds&show_option_none=Other&name=othermenu'); ?>
<script type="text/javascript"><!--
var dropdown = document.getElementById("othermenu");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/?clean_feeds="+dropdown.options[dropdown.selectedIndex].text.split(' ').join('-');
}
}
dropdown.onchange = onCatChange;
--></script>
</li>
</ul>
</div>
</div>
</div>
<div class="right_align"></div>
</div>

Answer 1

In this case, I would definitely recommend creating the HTML output through PHP beforehand. This way, when the page has loaded you can trigger your menu-script.
The example provided in the WordPress reference for the wp_dropdown_categories() function has a cool example which should help you on your way. What it does is basically replace certain parts of the generated HTML. These replacements in your case would then be mainly in the generated URL. Example reproduced here for clarity:
<li id="categories">
<h2><?php _e('Posts by Category'); ?></h2>
<form action="<?php bloginfo('url'); ?>/" method="get">
<div>
<?php
$select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0');
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
<noscript><div><input type="submit" value="View" /></div></noscript>
</div></form>
</li>