Setting selection option using data attribute using jquery

Question

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");


    }

@Sushanth-- When you click on an item's Add button, the menus in the Product Selection box should all change to match that item. — Barmar
– Barmar, Commented Oct 19, 2012 at 16:19
Click the 'ADD' button in the tabs and it should set the options at the bottom to the correct settings so if you click the 50ml|Sterile|No Label|314 option it changes the dropdowns appropriately. — Jeepstone
– Jeepstone, Commented Oct 19, 2012 at 16:19
Instead of matching the data to the text of an option, wouldn't it be simpler to match it to the option's value? Then you could do $("#capacity).val($(this).data('capacity')). — Barmar
– Barmar, Commented Oct 19, 2012 at 16:21

jd_7 · Accepted Answer · 2012-10-19 16:39:58Z

4

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);

answered Oct 19, 2012 at 16:39

jd_7

1,86213 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sushanth -- · Accepted Answer · 2012-10-19 16:14:20Z

0

Instead of

.attr('selected',true);

Try using

.prop('selected',true);

answered Oct 19, 2012 at 16:14

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Jeepstone Over a year ago

Doesn't seem to have any effect

Collectives™ on Stack Overflow

Setting selection option using data attribute using jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related