Change default attribute select field to list

[shniurs]

Hi, I want to change default product attribute select form into the ul->list.

I need this in order to style it the way I want.

 

I was thinking about using hidden input field and change it's value according to clicked li item.

This works, but the problem is in updating add to cart button, when selected attribute is out of stock.

 

Here's the code to get the value from the list to hidden input:

<ul id="MyList">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
   <li name="quantitylist" value="{$id_attribute|intval}" onchange="findCombination();getProductAttribute();">Attribute id: {$id_attribute|intval}</li>
{/foreach}
</ul>

<input type="hidden" id="group_{$id_attribute_group|intval}" name="inputAtt"  />

Then there's jQuery code to capture click events and change input value:

<script type="text/javascript">
$("#MyList li").click(function(){
    $("input[name='inputAtt']").val($(this).attr("value")).trigger('change');
});
</script>

I was trying several ways of triggering onchane event/onclick event, I even added these functions findCombination(); and getProductAttribute(); into click function, but nothing works.

 

Any thoughts on what I am doing wrong?