[英]How add a class to select element <option> tag in Contact Form 7?
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. 我是Contact Form 7的忠实拥护者,我总是到需要对表单进行一些扩展自定义的地步。 This time, I'm quite frustrated trying to add different classes to a select element
<option>
tag with no avail. 这次,我很沮丧地试图将不同的类添加到选择元素
<option>
标记而无济于事。
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. 我想做的是实现一个很酷的样式和效果,以将Here的下拉列表转换成我自己的CF7表单 -屏幕截图显示它运行良好,但是未显示图标,因为可以将它们显示为
<option>
select元素中的标记需要具有自己的类。
For eg: 例如:
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. 首先,我需要创建一个id为=“ cd-dropdown”和class =“ cd-select”的select元素,直到此处,这都可以通过CF7短代码生成器(如下所示)轻松实现。
[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: 前面提到的联系表7的简码将html select元素生成为如下形式:
<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. 但是我希望能够将一个类添加到
<option>
标记中。 Is it even possible to achieve that by using the CF7 shortcode generator? 使用CF7短代码生成器甚至可以实现这一目标吗? Are there any workarounds in order to achieve that maybe by using javascript/jQuery or even PHP?
是否有任何变通办法可以通过使用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>
I'd really appreciate any guidance regarding this issue. 我真的很感谢有关此问题的任何指导。 Thanks in advance.
提前致谢。
Just add this jquery: http://jsfiddle.net/rvpatel/7wa3V/ 只需添加此jQuery: http : //jsfiddle.net/rvpatel/7wa3V/
$( "#cd-dropdown option" ).addClass(function(index) {
return "icon-" + $(this).text().toLowerCase().split(' ').join('-');
});
I think it would be easier to add classes to option client side using jQuery (assuming you are already using jQuery for the SimpleDropDownEffects plugin) 我认为使用jQuery将类添加到选项客户端会更容易(假设您已经使用jQuery的SimpleDropDownEffects插件)
Example Select rendered by contact form: 示例选择按联系表单呈现:
<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>
Add following javascript on the page: 在页面上添加以下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.
});
Pros: No hacking into plugin files, no update plugin woes. 优点:不会侵入插件文件,也不会更新插件。
Cons: class names are had-coded in js 缺点:类名是用js编码的
Modify in your plugin dir modules/select.php
wpcf7_select_shortcode_handler function: 在插件目录
modules/select.php
/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;
}
Now you can call the plugin as before, or send the value of json(all keys rendered as attribute), ie: 现在您可以像以前一样调用该插件,或发送json(所有呈现为属性的键)的值,即:
[select* select-profissao id:cd-dropdown class:cd-select '{"value":"Professional","class":"mytestclass"}' '{"value":"Nurse","more-attr":"Nurse Attribute"}']
Unfortunately I can not test this (No installed wordpress). 不幸的是,我无法对此进行测试(未安装wordpress)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.