Webkit Selectors
Tuesday May 11, 2010
While working on a project recently, I ran into a strange problem selecting drop down items from a select element with jQuery. The problem only seemed to exist in webkit browsers. What I have is a shopping cart page that contains a form with any number of items, inside each of these items is the drop down list. I need to allow the user to select a size to download after purchase. I store these values in an array inside each select element called sizes[]. When a user selects an item from the list, I grab the value, recalculate the total price and update the sub-total. I decided to use the click event on the item to trigger the function.
The above code works in Firefox. It watches all the input elements with the name of sizes[], and fires the function when one of them is clicked. And now Webkit…
This code reacts to the onchange event. The problem with this code is that it watches all select elements and reacts when any of them are clicked or changed. This is a much cleaner approach, but it has some issues. It will only watches for all select elements, and doesn't watch for specific named elements. This works fine for now, but what if I need to add more select elements in the future? I'm sure if I look though the jQuery docs, I can find a better solution, or maybe it's time to write my first plugin.