I'm having a problem with chrome and jQuery. My code works perfectly in FF and IE (ironic hey) but in Chrome the same code doesn't work. Simplified snippet below
I've tried a few of the suggestions i found online but i can't get it working using the existing code. Something i noticed is that if i change 'select#box option' to 'select#box' it works in chrome but then i don't get the value i need from the select dropdown menu
Thanks in advance
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
That is strange. It give the error "Uncaught TypeError: Cannot read property 'href' of null chrome-extension://.../contentScript.js:1". Not sure what doesn't have the href property (the select certainly doesn't)?
I checked the developer console in chrome but no error or warnings displayed; i'm using a very old (first) version of chrome so i wonder if that couldn't be the issue. Yes the errors doesn't seem to make any sense
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
It seems problem lies with the 'select#box option' for chrome; if the 'option' is removed it echoes the selection but i found a problem with the script i pasted; if the first option is selected from the dropdown (A in this case) it doesn't display the alert message - only when selecting another option does the message display; the snippet below seems the most viable in terms of using the script in chrome
//
jQuery('select#box').on('blur', function(){
//
var term = jQuery('select#box option:selected').val();
alert(term);
});
The snippet alerts the correct option but only after clicking elsewhere on the page; not so much a problem for me but it might annoy people using the script
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
using the really nested selectors usually isn't a good idea... and I don't mean $("div#test") I mean $("div#test .findme") The better usage would be $("div#test").find('.findme'). That said a simple solution to your problem is this...
//I will be using $ as jQuery as it's easier to type
$("select#box").change(function() {
alert($(this).val());
});
There is no need to re-select everything once inside the change as you are already in the proper scope so $("select#box option:selected").val() is the same as $(this).val() only a whole lot slower as it has to re-query the dom to find it. not to mention if you are only alerting something there is no reason to store it in a variable first... it's just garbage collection.
Christopher wrote:Aren't the option:selected problem and the click() vs on('blur') difference separate issues?
no because the option:selected syntax causes the click and blur function/s not to work in chrome
danwguy wrote:There is no need to re-select everything once inside the change as you are already in the proper scope so $("select#box option:selected").val() is the same as $(this).val() only a whole lot slower as it has to re-query the dom to find it. not to mention if you are only alerting something there is no reason to store it in a variable first... it's just garbage collection.
thanks for the hint
Just a note on the code you posted: it works but your first value (A in this case) won't be displayed the first time the script is executed unless you have a 'placeholder' value as the first option. You'd need something like the snippet below for it to work; i think i'll go with this option if all else fails