jquery组件解决option选项框的样式自定义方案

记录一下今天工作中遇到的一个需求和自行找到的解决办法

需求：

在原始的select选项框中的增加一个标识。（我想增加一个具有样式的span元素，试了半天在option里无法添加span，更别说具有样式）

 

方案：

我参考查看了原先select的option框中是增加了一个"√"的图片元素。这里原版的解决方案是采用jquery.dd.js组件。

我查看了下组件的option元素的参数定义。

定义：

var parseOption = function(opt) {
var imagePath = '', title ='', description='', value=-1, text='', className='', imagecss = '', index;
if (opt !== undefined) {
var attrTitle = opt.title || "";
//data-title
if (attrTitle!="") {
var reg = /^\{.*\}$/;
var isJson = reg.test(attrTitle);
if (isJson && settings.jsonTitle) {
var obj = eval("["+attrTitle+"]");
};
title = (isJson && settings.jsonTitle) ? obj[0].title : title;
description = (isJson && settings.jsonTitle) ? obj[0].description : description;
imagePath = (isJson && settings.jsonTitle) ? obj[0].image : attrTitle;
imagecss = (isJson && settings.jsonTitle) ? obj[0].imagecss : imagecss;
index = opt.index;
};

text = opt.text || '';
value = opt.value || '';
className = opt.className || "";
//ignore title attribute if playing with data tags
title = $(opt).prop("data-title") || $(opt).data("title") || (title || "");
description = $(opt).prop("data-description") || $(opt).data("description") || (description || "");
imagePath = $(opt).prop("data-image") || $(opt).data("image") || (imagePath || "");
imagecss = $(opt).prop("data-imagecss") || $(opt).data("imagecss") || (imagecss || "");
index = $(opt).index();
};
var o = {image: imagePath, title: title, description: description, value: value, text: text, className: className, imagecss:imagecss, index:index};
return o;
};

 

查看了这个组件中的参数定义后，我结合原先项目中用采用的option模板写法，做了稍微的改动。

原先项目中option模板代码：

<option value="{{id}}" data-title="{{name}}" {{#if done}} data-image="/images/selected.png"{{else}} data-image="/images/null.png" {{/if}}>
{{value}}
</option> 

查看原始的代码是在option标签中增加了一个data-image的属性，就是"√"的图标。页面中显示的效果就是，在每个符合条件的选项前面有个"√"的图标。

根据这个特性，我就思考可否在option中再添加一个属性，来放我原先想要添加的span里的内容。

就这样，我选择了description这个属性，对原始的代码进行了修改。

如下：

<option value="{{id}}" data-title="{{name}}" {{#if done}} data-image="/images/selected.png"{{else}} data-image="/images/null.png" {{/if}}
{{#if ok}} data-description="正" data-imagecss="fcss" {{/if}}>
{{value}}
</option> 

黄色银光笔标出的为新增的部分。

总结：

• 其中 data-description="正" 是我想要添加span元素而采用上面组件里面description这个属性。
• data-image="fcss" 是为了修改原始的 data-image这个属性的css样式。
• 以上，就完成了我想要在option中新增一个标识的需求。

 tails：第0000 0000 0000 0011篇