Search code examples
jqueryattributes

Setting selection option using data attribute using jquery


http://medfor.petersenuploads.co.uk/product.php/698/2/clear-ps-honey-jar-with-metal-screw-cap

Click on the Full Price tab and 'ADD' one of the options. This should set the values of the select boxes below but it doesn't change. The event is firing correctly but not changing the selected items.

Could this be a data type issue?

$('a.addspecific').live(
    'click', function(e) {
        e.preventDefault();
        //console.log($(this).data('sterility'));
        console.log("IN");
        //Update dropdowns for JShop functionality
        $('#capacity').find("option").filter(function() {
            return $(this).text() == $(this).data('capacity');  
        }).attr('selected',true);
        console.log($(this).data('capacity'));
        $('#sterility').find("option").filter(function() {
            return $(this).text() == $(this).data('sterility');  
        }).attr('selected',true);
        console.log($(this).data('sterility'));
        $('#labeltype').find("option").filter(function() {
            return $(this).text() == $(this).data('labeltype');  
        }).attr('selected',true);
        console.log($(this).data('labeltype'));
        $('#itemspercase').find("option").filter(function() {
            return $(this).text() == $(this).data('itemspercase');  
        }).attr('selected',true);
        console.log($(this).data('itemspercase'));
        console.log("OUT");


    }

Solution

  • The this context is fail, try it:

    console.log("IN");
    var thes = this;
    
    $('#capacity').find("option").filter(function() {
         return $(this).text() == $(thes).data('capacity');  
    }).attr('selected',true);