Magento 1.9 – Display Drop Down Options for Backend Values

drop-downsmagento-1.9module

We created custom module and we saved list of product Brands & Models in backend. In below image, Apple, sony, samsung are brands & iphone4, iphone4s...etc are models.

enter image description here

Brands

enter image description here

Models

enter image description here

We want to create dropdown options for both Brands & Models in frontend. Once we select particular brand from 1st drop-down box, then only associated models should display in 2nd Drop-down box.

enter image description here

Company/Brand/Block/Frontend/View.php

class Company_Brand_Block_Frontend_View extends Mage_Catalog_Block_Product_Abstract
{
     protected function _prepareLayout()
    {
        $this->getLayout()->createBlock('catalog/breadcrumbs');
        $headBlock = $this->getLayout()->getBlock('head');
        if ($headBlock) {
            $product = $this->getProduct();
                $title = $product->getMetaTitle();
            if ($title) {
                $headBlock->setTitle($title);
            }
            $keyword = $product->getMetaKeyword();
            $currentCategory = Mage::registry('current_category');
            if ($keyword) {
                $headBlock->setKeywords($keyword);
            } elseif ($currentCategory) {
                $headBlock->setKeywords($product->getName());
            }
            $description = $product->getMetaDescription();
            if ($description) {
                $headBlock->setDescription( ($description) );
            } else {
                $headBlock->setDescription(Mage::helper('core/string')->substr($product->getDescription(), 0, 255));
            }
            if ($this->helper('catalog/product')->canUseCanonicalTag()) {
                $params = array('_ignore_category' => true);
                $headBlock->addLinkRel('canonical', $product->getUrlModel()->getUrl($product, $params));
            }
        }

        return parent::_prepareLayout();
    }
    public function getProduct()
    {
        $collection = Mage::getModel('catalog/category')->load(310)
            ->getProductCollection()
            ->addAttributeToSelect('*')
            ->addAttributeToFilter('custom_phone_case', 1);

            $products=$collection->getFirstItem();

            $product =  Mage::getModel('catalog/product')->load($products->getId());
            $p=Mage::registry('product');
        if ($p=='') {Mage::register('product', $product);}
            return  $product;
        }

I will give 50 bounty if it works for me.

Best Answer

Create a select box for Brands like :

<select id="brand_select">
    <option value="">MY BRAND</option>
    <option value="12">Apple</option>
    <option value="123">Nokia</option>
    <option value="655">HTC</option>
    ......
    <option value="BRAND_ID">BRAND_NAME</option>
    .....
</select>

Now create an array for Models (with brand_id), like :

<?php

//Load a model and create an array like this :

/*
$models = array(
            BRAND_ID => array(MODEL_ID => MODEL_NAME,  ..... ),
            BRAND_ID => array(MODEL_ID => MODEL_NAME,  ..... ),
            ...

            );
*/

$models = array(
            12 => array(12 => "iphone4", 45 => "iphone4s", ..... ),
            123 => array(32 => "lorem", 56 => "ipsum", ..... ),
            655 => array(433 => "xyzzz", 546 => "abcd", ..... ),
            ...

            );

//Converting $models array to JSON :

echo "<script>";
echo "var models = ".json_encode($models).";";
echo "</script>";
?>

Now add a jQuery function :

jQuery(document).ready(function(){

    jQuery( "#brand_select" ).change(function() {
        var brandId = jQuery(this).val();
        jQuery('#model_select').empty().append('<option value="">MY MODEL</option>');

        jQuery.each(models[brandId], function(key,value) {
            jQuery('#model_select').append(jQuery('<option>', { 
                value: key,
                text : value
            }));
        });
    });

    //trigger change event first time if required
    //jQuery( "#brand_select" ).change();
});
Related Topic