将 jQuery 添加到表单以显示/隐藏下拉菜单

Question

我正在尝试向 Wordpress 站点添加一些 jQuery，以便当用户在顶部下拉菜单中选择某个选项（软件）时，另一个选项会出现在其下方。

我正在使用以下代码 -

<p id="parent-menu">
    <select name='cat' id='cat' class='dropdown'  tabindex="40">
        <option value='-1'>Select a Category</option>
        <option class="level-0" value="13">Software problem</option>
        <option class="level-0" value="14">Hardware problem</option>
        <option class="level-0" value="15">Suggestion</option>
        <option class="level-0" value="16">General query</option>
    </select>
</p>
<p id="toggle-menu">
    <select name='cat' id='cat' class='dropdown'  tabindex="50">
        <option value='-1'>Select a Program</option>
        <option class="level-0" value="6">BigHand</option>
        <option class="level-0" value="7">IRIS</option>
        <option class="level-0" value="8">MS Outlook</option>
        <option class="level-0" value="9">MS Word</option>
        <option class="level-0" value="10">MS Excel</option>
        <option class="level-0" value="11">Oyez</option>
        <option class="level-0" value="12">Internet Explorer</option>
    </select>
</p>

如果有人可以帮助我做到这一点，我将不胜感激。

谢谢。

Answer 1

我不太确定 wordpress 如何处理 JQuery，但如果我用 PHP 编写它，它会是这样的。我会将分类法更改为 id 或 value。查询将进入我的按钮单击。您需要更改每个点击实例的 ID。

$(".class#id").toggle();
$(".dropdown#software").toggle();

好的。那么关于你的新信息。因为有一个特定的 id 我可以使用。当选择选项 13 时，您需要添加一些内容来检查代码页。选择该选项后，您将需要类似这样的东西。

$("#toggle-menu").toggle();

或者

$("#toggle-menu").show();

现在这里的想法是，如果您基于使用toggle()选择选项来执行此操作或事件，将根据选择显示或隐藏切换菜单，即我在它出现后选择了它，我取消选择或再次选择它菜单消失。使用 show() 将使切换菜单出现，但如果取消选择则不会隐藏它，在这种情况下，您需要在所有其他事件选择中使用 hide() 来隐藏切换菜单

Answer 2

如果您使用 jQuery UI，您可能会发现 Eric Hynds 插件很有用： http://www .erichynds.com/jquery/jquery-ui-multiselect-widget/

Answer 3

假设切换菜单不关心第一个菜单中选择的内容，您想要的是这个

$('#parent-menu').change(function(event)
{
  $('#toggle-menu').show();
});

$('#toggle-menu').change(function(event)
{
  var selections = $('#parent-menu').val() + ' ' + $('#toggle-menu').val();
  alert(selections);
});