Add jQuery to a form to show/hide a dropdown menu

1 Views

I am trying to add some jQuery to a WordPress site so that when a user selects a certain option (Software) in the top dropdown menu, another appears under it.

I am using the following code –

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

Id be greatful if someone could help me to do this.

Thanks.

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. I am not exactly sure on how wordpress handles JQuery but if I was writing this in PHP it would be something like. I would change taxonomy to id or value. And the query would go inside my button click. You would need to change your id for each click instance.

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

    ok. So on your new info. Since there is a specific id I can use. You will need to include something to check your code page for when the option 13 is selected. When that option is selected you would need something like this.

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

    or

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

    Now the idea here is that if you have this action or event based on selection of option using toggle() will show or hide toggle-menu depending on the selection, ie i selected it once it will appear, i deselect or select it again menu disappears. Using show() will make the toggle-menu appear but not hide it if deselected, in which case you would want to use a hide() in all other event selections to hide the toggle-menu

  3. Assuming toggle menu doesnt care what was selected in the first menu, what you want is this

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

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