如何在Contact Form 7中添加一个类来选择元素<option>标签？

Question

I'm a big fan of Contact Form 7 and I always come to a point where I need to make a few extended customization to my forms. This time, I'm quite frustrated trying to add different classes to a select element <option> tag with no avail.

What I'm trying to do is implement a cool style and effect to dropdown lists from Here into my own CF7 form - as the screenshot shows it works nicely, however, icons are not showing because so that they can be displayed the <option>tag within a select element needs to have its own class.

For e.g:

First, I need to create a select element with id="cd-dropdown" and class="cd-select", until here, this can be easily achieved with the CF7 shortcode generator as bellow.

[select* select-profissao id:cd-dropdown class:cd-select "Professional" "Nurse" "Lawyer"]

Contact Form 7 aforementioned shortcode generates the html select element to something like this:

<select id="cd-dropdown" class="cd-select">
 <option value="" selected>Professional</option>
 <option value="" >Nurse</option>
 <option value="" >Lawyer</option>
</select>

But I'd like to be able to add a class to the <option> tag. Is it even possible to achieve that by using the CF7 shortcode generator? Are there any workarounds in order to achieve that maybe by using javascript/jQuery or even PHP?

<select id="cd-dropdown" class="cd-select">
 <option value="" selected>Professional</option>
 <option value="" class="icon-nurse">Nurse</option>
 <option value="" class="icon-lawyer">Lawyer</option>
</select>

I'd really appreciate any guidance regarding this issue. Thanks in advance.

Answer 1

Just add this jquery: http://jsfiddle.net/rvpatel/7wa3V/

    $( "#cd-dropdown option" ).addClass(function(index) {
     return "icon-" + $(this).text().toLowerCase().split(' ').join('-');
});