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

在这种情况下，我肯定会建议事先通过PHP创建HTML输出。这样，当页面加载后，您可以触发菜单脚本。

wp_dropdown_categories() function的WordPress参考中提供的示例有一个很酷的示例，可以帮助您。它的作用基本上是替换生成的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>

javascript下拉列表未及时加载

1 个答案: