Magento Configurable Product - Drop Down Menu Select Option and Keep Other Drop Down Selections Unchanged

Viewed 1059

I have the following javascript on my configurable products page which removes the "Choose an Option..." default from Drop Down menus. When I change one of the selections, the other drop down menus default to "Choose an Option...". I want the drop down menus to remain unchanged when making selections.

Example: If I change the selection in the color drop down, I want the type and other options to keep their previously selected options. I've included images below to show the end goal.

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
        <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
            <div class="input-box">
                <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" onchange="update_<?php echo $_attribute->getAttributeId() ?>();" class="required-entry super-attribute-select">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                  </select>
              </div>
        </dd>
    <?php endforeach; ?>
    </dl>

<script type="text/javascript">
//Dropdown option changing
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>); 

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

      //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; ?>
</script>

These are the default optionsThese are the default options

This is what happens when the color is changedThis is what happens when the color is changed

This is what I'd like to happenThis is what I'd like to happen

0 Answers
Related