如何在产品页面上将下拉选项更改为不同的形式？

Iam a newbie in magento and i got something very tricky on product page. I have to hide the dropdown option from here and show all the attributes values in a single line like

[Size : Small Medium Large]

[Color : Red Green Pink]

but the color will only show after selecting the size like in default magento dropdown. I am able to get all the attribute according to the product id but how can i get the color attribute according to the size attribute for a particular product, and then pass that values to the cart page after clicking on the add to cart button.

I have really stuck in this task can someone help me please..

Hope this helps you

$sizeStr = '';
$colorStr = '';
$attrs = $product->getTypeInstance(true)->getConfigurableAttributesAsArray($product);
foreach($attrs as $attr) {
    if(0 == strcmp("size", $attr['attribute_code'])) {
        $sizeStr .= $attr['values']." "; //get size
    }else if(0 == strcmp("color", $attr['attribute_code'])) {
        $colorStr .= $attr['values']." "; // get color
    }
}