Firefox不会在第二次点击时更新价值

Question

So I've taken over a project that is almost ready to launch, a site where you can lease cars. I've uploaded the main part of the service here: http://erikblomqvist.se/junk/car/

Everything works smoothly except for the color changing function (the colored boxes under the headline Färgalternativ ). It's supposed to update the price on the colors from brown to light gray (#4 - #8) – those are a bit more expensive, since they are in metallic. In Chrome, this works as planned, but in Firefox, if I first select a metallic color, then a non-metallic, and THEN a the same metallic again, the price won't change back. It changes correctly the first time, but not the second time I click that metallic color. In Safari, the price doesn't change at all (I'm guessing that if the Firefox problem gets solved, Safari gets solved as well).

The function is based on a data-name on the color boxes, that gets checked with this function:

$( '#car-colors .color' ).each(function() {
    $( this ).on( 'click', function() {
        selected_color = undefined; 

        var color_name = $( this ).data('name');

        $( '#car-colors .color' ).not( this ).removeClass('selected');
        $( this ).addClass('selected');

        $( 'option', color_select ).each( function() {
            if( $( this ).val() == color_name ) {
                color_select.find( 'option' ).removeAttr('selected');
                $( this ).attr('selected', 'selected');
            }
        });

        $( '.selected-color-name' ).fadeIn();
        $( '.selected-color-name span' ).html( color_name );

        var selected_color = color_select.children(':selected');

        checkSelectedColor(selected_color);
    });
});

The variable color_select is defined as $( '#order-color-select' ) .

The function checkSelectedColor is defined here:

function checkSelectedColor(selected_color) {
    if( selected_color.data('is-metallic') == 'yes' ) {
        color_checkbox.prop('checked', true);
    } else {
        color_checkbox.prop('checked', false);
    }

    color_input.val( selected_color.val() );                
    calculatePrice();
}

I've added stuff like selected_color = undefined to make sure that the variable is reseted, but after a color that has an <option data-is-metallic="yes"> (inside of #order-color-select ) is selected a second time, it handles the value as "no" instead of "yes".

I can't get my head around on why this is, especially only in Firefox/Safari.

I've included the beautified version of the car functions here: http://pastebin.com/i5bup5rx

Appreciate any kind of help that could lead me in the right direction of getting this solved!

Thanks

Answer 1

I think the error is in setting the selected option in the select element using .attr() .

Instead you can just set the value of the select element like

$('#car-colors .color').on('click', function() {
  var color_name = $(this).data('name');

  $('#car-colors .color').not(this).removeClass('selected');
  $(this).addClass('selected');

  $('#order-color-select').val(color_name);

  $('.selected-color-name').fadeIn();
  $('.selected-color-name span').html(color_name);

  var selected_color = color_select.children(':selected');

  checkSelectedColor(selected_color);
});