Record a need encountered in today’s work and the solution found by yourself

Requirements:

Add an ID in the original select option box. (I want to add a span element with style. I tried for a long time. I can’t add span in option, let alone with style)

Scheme:

I refer to the original select option box, which added a “√” picture element. The original solution here is to use the jquery.dd.js component.

I looked at the parameter definition of the option element of the next component.

definition:

 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 };

After reviewing the parameter definitions in this component, I made some changes in combination with the option template used in the original project.

Option template code in the original project:

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>

To view the original code, add a data image attribute in the option tab, that is, the “√” icon. The effect displayed on the page is that there is a “√” icon in front of each qualified option.

According to this feature, I think about whether I can add another attribute in option to put the content in span I originally wanted to add.

In this way, I selected the description attribute and modified the original code.

As follows:

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>

The part marked with yellow silver light pen is the new part.

Summary:

Where data description = “exactly” is the attribute of description in the above component that I want to add a span element.

Data image = “FCSs” is to modify the CSS style of the original data image attribute.

The above completes the requirement that I want to add an ID in option.

Tails: Part 0000 0011