Question

I am a n00b to jquery and web development and I am trying to create a series of dropdown menus that upon the user selecting an option will then make the next dropdwon menu appear, with a table appearing last.

Here is the HTML:

<div class="dropdownMenus">
                            <form id="menu1">
                                <h2>Choose your number</h2>
                                <select>
                                    <option class="descriptive" value="descriptive">Please choose your area</option>
                                    <option class="menuoption1" value="01493">01493 - Great Yarmouth</option>
                                    <option class="menuoption1" value="01603">01603 - Norwich</option>
                                    <option class="menuoption1" value="01393">01393 - Kings Lynn</option>
                                    <option class="menuoption1" value="01763">01763 - Lowestoft</option>
                                </select>
                            </form> 
                        </div>

                        <div class="dropdownMenus">
                            <form id="menu2">
                                <h2>Number Type</h2>
                                <select>
                                    <option class="descriptive" value="descriptive">Please choose your number</option>
                                    <option class="menuoption2" value="gold">Gold</option>
                                    <option class="menuoption2" value="silver">Silver</option>
                                    <option class="menuoption2" value="bronze">Bronze</option>
                                </select>
                            </form> 
                        </div>

                        <div class="dropdownMenus">
                            <form id="menu3">
                                <h2>Order</h2>
                                    <form>
                                        <input id="menuoption3" type="checkbox" value="sequential"> Sequential<br>
                                        <input id="menuoption4" type="checkbox" value="random"> Random<br>
                                        <input id="menuoption5" type="checkbox" value="voice"> Voice<br>
                                        <input id="menuoption6" type="checkbox" value="email"> Email<br>
                                    </form>

                            </form> 
                        </div>

                        <table id="resultsTable">
                            <thead> 
                                <tr>
                                    <th>Area</th>
                                    <th>Number Type</th>
                                    <th>Select</th>
                                    <th>Voice</th>
                                    <th>Mail</th>
                                </tr>
                            </thead>
                            <tbody> 
                                <tr>
                                    <td>Placeholder Data</td>
                                    <td>Placeholder Data</td>
                                    <td>
                                        <input type="checkbox" id="select" />
                                    </td>
                                    <td>
                                        <input type="checkbox" id="voice" />
                                    </td>
                                    <td>
                                        <input type="checkbox" id="mail" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>

And here is my jQuery:

$(document).ready(function(){

var $packages = $("#menu2");
var $orders = $("#menu3");
var $resultsTable = $("#resultsTable");





$packages.hide();
$orders.hide();
$resultsTable.hide();

$(".menuoption1").click(function(){
    $packages.show();
});

$(".menuoption2").click(function(){
    $orders.show();
});

$("#menuoption3, #menuoption4, #menuoption5").click(function(){
    $resultsTable.show();
});
});

Here is a link to what I have done so far: https://jsfiddle.net/monkeyroboninja/9f9sotfv/

If you look at the link in Firefox or IE it works as it should, but viewed through Chrome it does not work completely. The initial hiding of the elements works but the reveal upon the click() events firing does not. Any help would be much appreciated :-)

Answer 1

Instead of

$(".menuoption1").click(function(){...

Try

$("#menu1").change(function(){...

This should work in all browsers and fires when the value of the dropdown is changed.

The reason why .click doesnt work(thanks to @Archer):

It's because option elements have no click event.

A change event handler on the select element would have worked too.

A series of dropdown menus, powered by jQuery, hiding and showing, but not in Chrome

1 个答案: