HTML SELECT OPTION convert/changed to <UL> <LI> - html

Question

I want my code below to be converted or changed to list style or div.
<div class="input-box">
<select id="<?php echo $_code ?>_cc_type" name="payment[cc_type]" class="required-entry validate-cc-type-select">
<option value=""><?php echo $this->__('--Please Select--')?></option>
<?php $_ccType = $this->getInfoData('cc_type') ?>
<?php foreach ($this->getCcAvailableTypes() as $_typeCode => $_typeName): ?>
<option value="<?php echo $_typeCode ?>"<?php if($_typeCode==$_ccType): ?> selected="selected"<?php endif ?>><?php echo $_typeName ?></option>
<?php endforeach ?>
</select>
</div>
Instead of having this on dropdown selection, i just want it display as list selection with validation properly working.
Thanks!

Answer 1

Hey I have tried to work on the same concept.
May this would help.
FYI, this is not full-fledged code. I am still working on it.
SCRIPT
(function ($) {
$.fn.customSelect = function( options ) {
var settings = $.extend({
//mainWidth: '200',
selected: '0',
alignRight: 'false',
}, options );
return this.each(function() {
var el = $(this);
var name = el.prop('name');
var optionTag = el.children();
var wrapperDIV = $('<div class="customSelect"/>');
var newDIV = $('<div class="custom-select"/>');
var inputTag = $("<input name='"+name+"' type='text' readonly='readonly' />").hide();
var inputDummy = $("<div class='input-dummy'/>");
var valueHolder = $('<div class="value-holder clearfix"/>');
var ULTag = $('<ul class="clearfix"/>');
var spanTag = '<span/>'
el.wrap(wrapperDIV);
el.parent().append(newDIV);
newDIV.append(valueHolder);
valueHolder.append(spanTag);
valueHolder.append(inputTag);
valueHolder.append(inputDummy);
newDIV.append(ULTag);
optionTag.each(function(){
ULTag.append("<li data-selected='"+$(this).val()+"'>"+$(this).text()+"</li>");
}).end().remove();
var valDefault = $('li').eq(settings.selected - 1).val();
var textDefault = $('li').eq(settings.selected - 1).text();
$(inputTag).val(valDefault);
$(inputDummy).text(textDefault);
valueHolder.click(function(){
$(this).next().toggle();
});
ULTag.each(function(){
$('li',this ).click(function(){
$(this).each(function(){
$(this).addClass('active').siblings().removeClass('active');
var x = $(this).data('selected');
var y = $(this).text();
$(inputTag).val(x);
$(inputDummy).text(y);
$(this).parent().hide();
});
});
});
if(settings.selectorRight == 'true'){
inputDummy.css('float', 'right');
//valueHolder.css('float', 'right');
}
else{
inputDummy.css('float', 'left');
//valueHolder.css('float', 'left');
}
var woVH = valueHolder.width();
inputDummy.width(woVH-20);
ULTag.width(woVH);
});
};
}( jQuery ));
Related to: Custom SelectBox (UL-LI) with same functionality in HTML FORM
JSFIDDLE