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

问题

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 options

This is what happens when the color is changed

This is what I'd like to happen

来源：https://stackoverflow.com/questions/35945102/magento-configurable-product-drop-down-menu-select-option-and-keep-other-drop

标签

javascript

magento

configurable-product