HTML SELECT OPTION转换/更改为< UL> < LI> [英] HTML SELECT OPTION convert/changed to <UL> <LI>
本文介绍了HTML SELECT OPTION转换/更改为< 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转换/更改为< UL> < LI>的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文