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 '16 at 11:25
  • @AshishMadankar 1.9
    – Deepak Rai
    May 9 '16 at 11:26
  • Try after removing dropdown[0].remove(); line May 9 '16 at 11:27
  • @AnilSuthar not working dropdown[0].remove();
    – Deepak Rai
    May 9 '16 at 11:34
  • start with index=1, like for(index = 1; after removing that line May 9 '16 at 11:36

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 '17 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, privacy policy and cookie policy

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