0

This demo is working on firefox. But, in webkit browsers (Chrome, Safari) it is not working. Any ideas?

I really can't figure it out. The nth-child css is working as well. Here is the code here

jQuery("#featured_1 .product-options .product-option:nth-child(2) .product-option-value option:nth-child(1)").click(function(){
    jQuery("body").css("background-color", "red");
});

jQuery("#featured_1 .product-options .product-option:nth-child(2) .product-option-value option:nth-child(2)").click(function(){
    jQuery("body").css("background-color", "green");
});
j08691
  • 204,283
  • 31
  • 260
  • 272
Rasel Ahmed
  • 305
  • 2
  • 8
  • 20
  • 3
    Why doesn't it work? What about it doesn't work? How do you know it doesn't work? – Kevin B Feb 03 '15 at 16:43
  • What is not working about it? – Dave Feb 03 '15 at 16:43
  • 5
    1) That's a rediculously specific selector 2) Given the HTML, the indexes in the `eq()` funcs are incorrect. 3) Use the `val()` of the select and the `change` function to do what you require – Rory McCrossan Feb 03 '15 at 16:43
  • 2
    option elements can't be reliably styled cross-browser, that's why everyone replaces them with regular elements when doing fancy dropdowns – adeneo Feb 03 '15 at 16:43
  • 2
    @adeneo he's giving them a click event, not styling, though i think your comment still stands for the click events too. – Kevin B Feb 03 '15 at 16:44
  • 1
    Use a `change` event on the dropdown and evaluate the value, instead on relying on the click events of each option value. – Axel Feb 03 '15 at 16:44
  • 1
    @KevinB - Yes, option elements don't have reliable mouse events either. – adeneo Feb 03 '15 at 16:45
  • Seems to work for me on Chromium 39. Also Chrome/Chromium no longer uses Webkit but Blink (a for of Webkit but I'd say treating Chrome and Safari as the same is no longer applicable). The JS you posted also does not make sense. `.product-option:nth-child(2)` matches nothing as there's only one `.product-option` – Sergiu Paraschiv Feb 03 '15 at 16:45
  • I mean styling is working. But click event is not working @KevinB – Rasel Ahmed Feb 03 '15 at 16:47
  • 2
    @RaselAhmed My guess would be said browsers don't support click events on option elements. – Kevin B Feb 03 '15 at 16:48
  • 1
    I am sorry for bad English. Thanks for your comment. I will try better form next time. @KevinB – Rasel Ahmed Feb 03 '15 at 16:49
  • 2
    http://stackoverflow.com/questions/1402227/click-event-on-select-option-element-in-chrome and http://stackoverflow.com/questions/3419038/jquery-event-delegation-for-select-options-in-chrome and http://stackoverflow.com/questions/7080213/jquery-click-event-not-working-on-option-element and ... – j08691 Feb 03 '15 at 16:51

1 Answers1

2

The selectors you have in your example are needlessly specific. Also, given the HTML the indexes you are providing the :eq selector are incorrect. You should use the change event when dealing with select elements so that your code works for people who use the keyboard to navigate.

That being said, you can simplify your code by using change, and checking the index of the selected option instead:

$("#featured_1 .product-option-value").change(function(){
    if (this.selectedIndex == 0) {
        // first option:
        $("body").css("background-color", "red");
    } else {
        // second option
        $("body").css("background-color", "green");
    }
});

Updated fiddle

You could even shorten this further using a ternary expression, if required:

$("#featured_1 .product-option-value").change(function(){
    $("body").css("background-color", this.selectedIndex == 0 ? "red" : 'green');
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339