Question

I can’t get the jquery selector in my javascript below to work in Safari (5.0.4):

$("#js-nav-bar option").click(function() {
    document.location.href = $(this).val() ;
}) ;

Just using "#js-nav-bar" as a selector works in Safari, but I need to target the <option> element in my HTML.

The selector $("option") doesn’t work in Safari either, but I do know that the jquery script is working. My code works in FF (3.6.16) and Opera (9.27), and I’ve validated my HTML against the W3 validator and my javascript against JSlint.

Is there a way I could better write my jquery selector, or could I build a compound javascript selector to work around the Safari bug?

Answer 1

It may have to do with the binding you’re going for. Instead of binding the click event to the <option> itself, bind to the <select>‘s change event instead.

$('#js-nav-bar select').change(function(e){
  var tgt = $(this).val(); // .val() should find the selected option's value for you.
  document.location.href = tgt;
});

See if that works any better.