I want To auto select All Drop Downs On Product Page. Which Have Only One Option. I used Some solution But Its Based On Removing Choose An Option. By This We Can Remove Choose An Option...

But My Need Is Not Removed Choose an Option.... How Can I do this.

  • please mention the version. May 9, 2016 at 11:25
  • @AshishMadankar 1.9
    – Deepak Rai
    May 9, 2016 at 11:26
  • Try after removing dropdown[0].remove(); line May 9, 2016 at 11:27
  • @AnilSuthar not working dropdown[0].remove();
    – Deepak Rai
    May 9, 2016 at 11:34
  • start with index=1, like for(index = 1; after removing that line May 9, 2016 at 11:36

2 Answers 2


Here You Can Make Attribute Selected...If DorpDown Have Only One Attribute.... Bellow of This code

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

Put this code....here..

 //we create new function
    spConfig.setInitialState = function (dropdown_id)
        //select dropdown
        var dropdown = $(dropdown_id);
        //remove empty option from dropdown so it is not selectable after initial selection
        // dropdown[0].remove();
        if (dropdown.length == 2) {
            dropdown[0].remove();// for the removing choose an option
        //change selections in dropdowns
        for (index = 0; index < dropdown.length; index++)
            if (dropdown[index].value != "")
                dropdown.selectedIndex = index;
                var element = dropdown;
                var event = 'change';
                //fire events
                if (document.createEventObject)
                    var evt = document.createEventObject();
                    return element.fireEvent('on' + event, evt)
                } else
                    var evt = document.createEvent("HTMLEvents");
                    evt.initEvent(event, true, true);
                    return !element.dispatchEvent(evt);
<?php foreach ($_attributes as $_attribute): ?>
        spConfig.setInitialState("attribute<?php echo $_attribute->getAttributeId() ?>")
<?php endforeach; ?>
  • i used this code but no changes ,It still shows the default functionality
    – inrsaurabh
    Jul 1, 2017 at 9:52

A late answer, but for those people still looking, here's how I solved it in jQuery. It may need adjusting for templates that rearrange the configurable product template as it precisely walks up and down the DOM tree.

I placed it in my template file Magento_ConfigurableProduct/templates/js/components.phtml

Explanation of how it works: It hooks onto the dropdrop change event and using the setTimeout function, runs after all the other hooked events run to autoselect the next dropdown if there's only one option. This can then cascade if the dropdown after that also only has one option.

/* Andrew Davie 100118 
Where there is only one option left in the dropdowns, autoselect it.
require(['jquery'], function($){ 
        var picked = this;
        setTimeout(function() {
                autoselect(picked);  //do the autoselect after everything else.
        }, 0);

    function autoselect(picked){
        var nextsel = $(picked).parent().parent().next().find('select[id^="attribute"]');
            $(nextsel).find(':nth-child(2)', picked).prop('selected',true);
<?= $block->getChildHtml() ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.