Question

I’m trying to apply jquery functions to a drop down menu and for some reason it only works with Firefox 3.5.7. Below is the HTML for the Dropdown Menu:

<select name="Delivery" id="Delivery" class="pulldown" tabindex="24">
    <option id="pick_up" value="Pick up">Pick up</option>
    <option id="mail" value="First Class Mail">First Class Mail</option>
    <option id="fax_mail" value="Fax and Mail">Fax and Mail</option>
    <option id="fedex" value="FedEx">FedEx</option>
</select>

Here’s the jquery for the above:

$(document).ready(function() {
$("#mail").click(function() {
$("#rec_address").slideDown("slow");
$("#faxnumber").slideUp("slow");
$("#pmtmethod").slideUp("slow");
    }
);
});

$(document).ready(function() {
$("#fax_mail").click(function() {
$("#faxnumber").slideDown("slow")
$("#rec_address").slideDown("slow");
$("#pmtmethod").slideUp("slow");
    }
);
});

$(document).ready(function() {
$("#fedex").click(function() {
$("#pmtmethod").slideDown("slow")
$("#rec_address").slideDown("slow");
$("#faxnumber").slideUp("slow");
    }
);
});

$(document).ready(function() {
$("#pick_up").click(function() {
$("#pmtmethod").slideUp("slow")
$("#rec_address").slideUp("slow");
$("#faxnumber").slideUp("slow");
    }
);
});

The above JQUERY works very very well with Firefox but does not work at all with any other browser. I’m only concerned with IE though so if you all have absolutely any idea how to make this work please let me know….I’m desperate!!! 🙁 THanks and hope you all have a great week.

Answer 1

I don’t know if this will solve your problem (maybe Hunter’s solution will) but this is just a comment on your jQuery. It looks like you’re abusing the $(document).ready() function. You could put all of your .click() event bindings into a single $(document).ready() function or put all your bindings into another function, say function BindEvents() and call that from your $(document).ready(). You’ll find it to be much cleaner and easier to maintain 🙂