HTML SELECT OPTION转换/更改为< UL> < LI> [英] HTML SELECT OPTION convert/changed to <UL> <LI>

问题描述

我希望将下面的代码转换或更改为列表样式或div。

 < div class =input-box> 
< select id =<？php echo $ _code？> _cc_typename =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> 
  

我只是希望它显示为列表选择，并且验证正确工作。

谢谢！ 相同的概念。
这可能会有帮助。

仅供参考，这不是完整的代码。
$ b

脚本

<$ p $ （
$ b $ .fn.customSelect = function（options）{
var settings = $ .extend（{
/ / mainWidth：'200'，
选中：'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 clearfi x/>'）;
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））;

涉及：

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!

解决方案

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

这篇关于HTML SELECT OPTION转换/更改为&lt; UL&gt; &LT; LI&GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！