Как добавить класс для выбора тега <option> в форме контакта 7?

Я большой поклонник Contact Form 7, и я всегда прихожу к тому моменту, когда мне нужно сделать несколько расширенных настроек для моих форм. На этот раз я очень расстроен, пытаясь добавить разные классы в тег select <option> без изменений.

То, что я пытаюсь сделать, – это реализовать классный стиль и эффект для выпадающих списков отсюда в моей собственной форме CF7 – поскольку скриншот показывает, что он работает хорошо, однако значки не отображаются, потому что они могут отображаться <option> тег в элементе select должен иметь свой собственный класс.

Например:

Во-первых, мне нужно создать элемент select с id = «cd-dropdown» и class = «cd-select», пока здесь это не будет легко достигнуто с помощью генератора коротких кодов CF7, как показано ниже.

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

Форма контакта 7 вышеупомянутый короткий код генерирует элемент выбора html примерно так:

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

Но я хотел бы добавить класс в <option> . Можно ли даже добиться этого, используя генератор коротких кодов CF7? Есть ли обходные пути для достижения этого, возможно, с помощью javascript / jQuery или даже 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> 

Я бы очень признателен за любые рекомендации по этой проблеме. Заранее спасибо.

Просто добавьте этот jquery: http://jsfiddle.net/rvpatel/7wa3V/

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

введите описание изображения здесь

Я думаю, что было бы проще добавлять классы на стороне клиента с помощью jQuery (если вы уже используете jQuery для плагина SimpleDropDownEffects)

Пример Выберите визуализацию в форме контакта:

 <select id="cd-dropdown" class="cd-select"> <option value="-1" selected>Choose a weather condition</option> <option value="1">Sun</option> <option value="2">Clouds</option> <option value="3">Snow</option> <option value="4">Rain</option> <option value="5">Windy</option> </select> 

Добавьте следующий javascript на страницу:

 jQuery(document).ready(function() { myClassNames = ["", "icon-sun", "icon-cloudy", "icon-weather", "icon-rainy", "icon-windy"]; jQuery.each(jQuery("#cd-dropdown option"), function(index, value) { jQuery(value).addClass(myClassNames[index]); }); //do SimpleDropDownEffects plugin here after classes are added. }); 

Плюсы: нет взлома в файлы плагинов, никаких проблем с плагинами обновлений.
Минусы: имена классов закодированы в js

Измените в своих modules/select.php dir modules/select.php wpcf7_select_shortcode_handler:

 function wpcf7_select_shortcode_handler( $tag ) { $tag = new WPCF7_Shortcode( $tag ); if ( empty( $tag->name ) ) return ''; $validation_error = wpcf7_get_validation_error( $tag->name ); $class = wpcf7_form_controls_class( $tag->type ); if ( $validation_error ) $class .= ' wpcf7-not-valid'; $atts = array(); $atts['class'] = $tag->get_class_option( $class ); $atts['id'] = $tag->get_option( 'id', 'id', true ); $atts['tabindex'] = $tag->get_option( 'tabindex', 'int', true ); if ( $tag->is_required() ) $atts['aria-required'] = 'true'; $atts['aria-invalid'] = $validation_error ? 'true' : 'false'; $defaults = array(); if ( $matches = $tag->get_first_match_option( '/^default:([0-9_]+)$/' ) ) $defaults = explode( '_', $matches[1] ); $multiple = $tag->has_option( 'multiple' ); $include_blank = $tag->has_option( 'include_blank' ); $first_as_label = $tag->has_option( 'first_as_label' ); $name = $tag->name; $values = $tag->values; $labels = $tag->labels; $empty_select = empty( $values ); if ( $empty_select || $include_blank ) { array_unshift( $labels, '---' ); array_unshift( $values, '' ); } elseif ( $first_as_label ) { $values[0] = ''; } $html = ''; $posted = wpcf7_is_posted(); foreach ( $values as $key => $value ) { $selected = false; // changed here if (! ( $attributes = json_decode($value, true) ) ) { $attributes = array( 'value' => $value ); } else { $value = (isset($attributes['value'])) ? $attributes['value'] : null; } if ( $posted && ! empty( $_POST[$name] ) ) { if ( $multiple && in_array( esc_sql( $value ), (array) $_POST[$name] ) ) $selected = true; if ( ! $multiple && $_POST[$name] == esc_sql( $value ) ) $selected = true; } else { if ( ! $empty_select && in_array( $key + 1, (array) $defaults ) ) $selected = true; } // changed here $item_atts = array('selected' => $selected ? 'selected' : '' ); $item_atts = array_merge($attributes, $item_atts); $item_atts = wpcf7_format_atts( $item_atts ); $label = isset( $labels[$key] ) ? $labels[$key] : $value; $html .= sprintf( '<option %1$s>%2$s</option>', $item_atts, esc_html( $label ) ); } if ( $multiple ) $atts['multiple'] = 'multiple'; $atts['name'] = $tag->name . ( $multiple ? '[]' : '' ); $atts = wpcf7_format_atts( $atts ); $html = sprintf( '<span class="wpcf7-form-control-wrap %1$s"><select %2$s>%3$s</select>%4$s</span>', $tag->name, $atts, $html, $validation_error ); return $html; } 

Теперь вы можете вызвать плагин, как и раньше, или отправить значение json (все ключи, отображаемые как атрибут), то есть:

 [select* select-profissao id:cd-dropdown class:cd-select '{"value":"Professional","class":"mytestclass"}' '{"value":"Nurse","more-attr":"Nurse Attribute"}'] 

К сожалению, я не могу проверить это (нет установленного wordpress).