Magento dropdown attribute default value

Question

As I found the option box default value in magento here:

/app/design/frontend/default/mytheme/template/catalog/product/view/type/options/configurable.phtml

<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
<option><?php echo $this->__('Choose an Option...') ?></option>
</select>

It shows 'Choose an Option...' as a default value

I try

<script>
 $(function() {
 $("#attribute525 option:first-child").attr("selected", true); //color
 $("#attribute272 option:first-child").attr("selected", true); //size
});
</script>

to make the default value each attribute set to the first option of each attribute,

but it doesn't work. Any suggestion will be appreciated, thanks.

Answer 1

This is how I do it. In

/app/design/frontend/default/mytheme/template/catalog/product/view/type/options/configurable.phtml

Add this

    Product.Config.prototype.checkOptions = function(element) {
        var numOptions = element.options.length-1;
        if(numOptions > 1) {
            element.up('dd').show().previous().show();
        }
        if(numOptions === 1) {
            element.options[1].selected = true;
            this.configureElement(element);
        }
    };
    Product.Config.prototype.initialize = (function(_super) {
        return function() {
            _super.apply(this, arguments);
            this.settings.each(function(element) {
                element.up('dd').hide().previous().hide();
            });
            this.checkOptions(this.settings.first());
        };
    })(Product.Config.prototype.initialize);
    Product.Config.prototype.configureElement = (function(_super) {
        return function() {
            _super.apply(this, arguments);
            if (!arguments[0].nextSetting) {
                return;
            }
            this.checkOptions(arguments[0].nextSetting);
        };
    })(Product.Config.prototype.configureElement);

above

var spConfig = new Product.Config(<?php echo $_jsonConfig ?>);

This also adds show/hide but you can remove those lines if you prefer.

Answer 2

To simply select the first real element in your select the following JavaScript should help:

$$('#attribute525 option')[1].selected = true;

Answer 3

Try this in js/varien/configurable.js

search for following code

// Init settings dropdown
        var childSettings = [];
        for(var i=this.settings.length-1;i>=0;i--){
            var prevSetting = this.settings[i-1] ? this.settings[i-1] : false;
            var nextSetting = this.settings[i+1] ? this.settings[i+1] : false;
            if (i == 0){
                this.fillSelect(this.settings[i])
            } else{
                 this.settings[i].disabled = true;
             }   
            $(this.settings[i]).childSettings = childSettings.clone();
            $(this.settings[i]).prevSetting   = prevSetting;
            $(this.settings[i]).nextSetting   = nextSetting;
            childSettings.push(this.settings[i]);
        }

Replace above with following

// Init settings dropdown
        var childSettings = [];
        for(var i=this.settings.length-1;i>=0;i--){
            var prevSetting = this.settings[i-1] ? this.settings[i-1] : false;
            var nextSetting = this.settings[i+1] ? this.settings[i+1] : false;
                this.fillSelect(this.settings[i])
                this.settings[i].disabled = false;
            $(this.settings[i]).childSettings = childSettings.clone();
            $(this.settings[i]).prevSetting   = prevSetting;
            $(this.settings[i]).nextSetting   = nextSetting;
            childSettings.push(this.settings[i]);
        }