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

Posted 2023-03-05

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

【英文标题】：How add a class to select element <option> tag in Contact Form 7?

【发布时间】：2014-03-25 21:51:32

【问题描述】：

我是 Contact Form 7 的忠实粉丝，而且我总是需要对我的表单进行一些扩展自定义。这一次，我非常沮丧地尝试将不同的类添加到选择元素 <option> 标记中，但无济于事。

我想要做的是实现一个很酷的样式和效果，以从Here 到my own CF7 form 的下拉列表 - 如屏幕截图所示，它工作得很好，但是，图标没有显示，因为它们可以显示选择元素中的<option>tag 需要有自己的类。

例如：

首先，我需要创建一个 id="cd-dropdown" 和 class="cd-select" 的选择元素，直到这里，这可以使用 CF7 短代码生成器轻松实现，如下所示。

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

Contact Form 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>

非常感谢有关此问题的任何指导。 提前致谢。

【问题讨论】：

查看插件文件以查看它生成选项的位置并根据需要进行编辑。

嘿@Billy Mathews，txt 的提示！无论如何，我不确定我是否能够做到这一点，我的意思是，我认为这需要在插件核心文件中进行深入调整，以创建额外的选项来为每个 标签添加一个唯一的类，存储数据库中的所有内容等等。但无论如何我会继续研究它......

【参考方案1】：

只需添加这个 jquery： http://jsfiddle.net/rvpatel/7wa3V/

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

【讨论】：

嘿@ravipatel，它对我很有用！如果 WPCF7 开发团队可以在插件的选项中提供此功能，那将非常有帮助。无论如何，感谢您的帮助！

【参考方案2】：

我认为使用 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 中编码的

【参考方案3】：

在您的插件目录中修改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）。

【讨论】：

破解插件不是一个好主意。更新时更改将消失。