How to add title attribute to selected option tags?

I am using the "Chosen plugin" and have no idea how to add the attribute to the picklist option tags.

I tried this using jQuery on a finished document but no luck.

+3


source to share


3 answers


you need to change Chosen.Jquery.js as follows to make it work

Using Chosen 1.0

Line # 62 add this line of code



this.parsed.push({
        array_index: this.parsed.length,
        options_index: this.options_index,
        value: option.value,
        text: option.text,
        html: option.innerHTML,
    title: option.title, // this is Line 62 add this line
        selected: option.selected,
        disabled: group_disabled === true ? group_disabled : option.disabled,
        group_array_index: group_position,
        classes: option.className,
        style: option.style.cssText
      });

      

Change line No. 255

return "<li title=\"" + option.title +"\"  class=\"" + (classes.join(' ')) + "\"" + style + " data-option-array-index=\"" + option.array_index + "\">" + option.search_text + "</li>";

      

+4


source


I have tried this..but no luck

It depends what you've tried. Give this function go by calling it with the select element you want its selected instance to inherit the titles

function cloneTitles(selectBox) {
    //make sure it has already been chosen-ised
    selectBox = $(selectBox).chosen();

    //get all the original options, should be in same order as chosen ones
    var origOpts = selectBox.find('option');

    //get all the chosen-created 'options'
    //NB there may be a better way to grab the chosen created element
    var chznOpts = selectBox.next().find('.active-result')

    //foreach option
    origOpts.each(function(index, origOpt) {
        //copy the attribute from the original
        $(chznOpts[index]).attr('title', $(origOpt).attr('title'));
    });
}

      



I have tried this on document ready


Perhaps your problem was that you were doing whatever you tried before you chose. Js has transformed your select boxes, but this function should mitigate that.

Also, if you need this for multiple select boxes, just use .each()


(For example,selectArray.each(function(i, select) { cloneTitles(select); })

I am assuming you are using jQuery and not Prototype (given your last line)
This way you can pass '#id' instead of <DOMObj> if you want.
The code can be modified to clone the given attribute instead of 'title'

or even an array of the given attributes!

+1


source


Using Chosen 1.1

html: option.innerHTML,   // Search
title: option.title,      // Add

      

...

option_el.innerHTML = option.search_text;    // Search
option_el.title = option.title;              // Add

      

0


source







All Articles