How to change size attribute from select drop down to ul li box

Question

I need to change view of size dorp down to ul li box like...

I need like this and currently size attribute is coming in drop down....

I tried in 
app/design/frontend/base/default/template/catalog/product/view/type/options/configurable.phtml

i tried this code...

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());

?>

<?php if ($_product->isSaleable() && count($_attributes) ): 


;?>
    <dl>

    <?php print_r() ?>
    <?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() ?>" class="required-entry super-attribute-select ">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                  </select>
              </div>
        </dd>

    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">


jQuery(function(){
    var id = "attribute150";
   jQuery('#'+id).after("<ul id='temp'   />")
        .children("option").each(function() {
            jQuery("#temp").append('<li value="'+jQuery(this).val()+'">'+jQuery(this).text()+"</li>");
        })
        .end().remove();
            jQuery('#temp').attr({"id":id,"name":id});
});
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    </script>
<?php endif;?>

Answer 1

I can recommend you this free extension. It allows you among other things to change any dropdown for configurable products to labels and/or images.
So you can change your size dropdown to labels but they will look slightly different than what you want, but with some css magic you can make them look as you want, or you can simply make the size options as images and upload them in the configuration area.
Here is the full documentation of hot it works and how it should be configured