Display Drop down options for Values saved in Backend

Question

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.

Brands

Models

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.

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.

Answer 1

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

Answer 2

Solution 1: Faster way to do this would be to get collection of Models when page is loading and create a json string of Models (with their ids and names) with respective Brands.

When user change selection of brand, then use JavaScript or jQuery to read json string and change options of Models drop-down.

Solution 2: Load only Brands drop-down values on page load and send ajax request to find Models for selected Brand every time. Then populate Models drop-down with resultant values of Models.