javascript dropdown не загружается вовремя

Question

Моя проблема заключается в том, что я пытаюсь создать javascript-меню, но сценарий, кажется, загружается очень медленно и поздно, поэтому он не работает в первые секунды. Поправьте меня, если я ошибаюсь. Во-вторых, мне не удается заставить каждый столбец работать хорошо, а иногда он просто привязывается к одной странице, независимо от того, какой вариант я выбираю, а также к другой проблеме, что нет реакции на мой выбор, например, я не сделайте все, даже если я действительно выбрал что-то из меню.

Знаете ли вы, что может быть проблемой? Это плохая идея сделать это с помощью JavaScript? Вы сделали бы это с PHP? Я также считаю, что код может быть слишком длинным.

Это пример для моей проблемы - 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

В этом случае, я бы определенно рекомендовал создать вывод HTML через PHP заранее. Таким образом, когда страница загрузится, вы можете запустить свой скрипт меню.

Пример, приведенный в описании WordPress для wp_dropdown_categories() function, имеет классный пример, который должен помочь вам на вашем пути. То, что он делает, в основном заменяет определенные части сгенерированного HTML. Эти замены в вашем случае будут в основном в сгенерированном URL-адресе. Пример воспроизводится здесь для ясности:

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