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

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

需求：

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

方案：

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

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

定义：

 1 var parseOption = function(opt) {
 2 var imagePath = '', title ='', description='', value=-1, text='', className='', imagecss = '', index;
 3 if (opt !== undefined) {
 4 var attrTitle = opt.title || "";
 5 //data-title
 6 if (attrTitle!="") {
 7 var reg = /^\{.*\}$/;
 8 var isJson = reg.test(attrTitle);
 9 if (isJson && settings.jsonTitle) {
10 var obj = eval("["+attrTitle+"]");
11 };
12 title = (isJson && settings.jsonTitle) ? obj[0].title : title;
13 description = (isJson && settings.jsonTitle) ? obj[0].description : description;
14 imagePath = (isJson && settings.jsonTitle) ? obj[0].image : attrTitle;
15 imagecss = (isJson && settings.jsonTitle) ? obj[0].imagecss : imagecss;
16 index = opt.index;
17 };
18
19 text = opt.text || '';
20 value = opt.value || '';
21 className = opt.className || "";
22 //ignore title attribute if playing with data tags
23 title = $(opt).prop("data-title") || $(opt).data("title") || (title || "");
24 description = $(opt).prop("data-description") || $(opt).data("description") || (description || "");
25 imagePath = $(opt).prop("data-image") || $(opt).data("image") || (imagePath || "");
26 imagecss = $(opt).prop("data-imagecss") || $(opt).data("imagecss") || (imagecss || "");
27 index = $(opt).index();
28 };
29 var o = {image: imagePath, title: title, description: description, value: value, text: text, className: className, imagecss:imagecss, index:index};
30 return o;
31 };

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

原先项目中option模板代码：

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

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

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

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

如下：

1 <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}}>
2 {{value}}
3 </option> 

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

总结：

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

tails：第0000 0000 0000 0011篇