如何添加類以選擇元素 <option>標簽在聯系表格7中？

Question

我是Contact Form 7的忠實擁護者，我總是到需要對表單進行一些擴展自定義的地步。 這次，我很沮喪地試圖將不同的類添加到選擇元素<option>標記而無濟於事。

我想做的是實現一個很酷的樣式和效果，以將Here的下拉列表轉換成我自己的CF7表單 -屏幕截圖顯示它運行良好，但是未顯示圖標，因為可以將它們顯示為<option> select元素中的標記需要具有自己的類。

例如：

首先，我需要創建一個id為=“ cd-dropdown”和class =“ cd-select”的select元素，直到此處，這都可以通過CF7短代碼生成器（如下所示）輕松實現。

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

前面提到的聯系表7的簡碼將html select元素生成為如下形式：

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

我真的很感謝有關此問題的任何指導。 提前致謝。

Answer 1

只需添加此jQuery： http : //jsfiddle.net/rvpatel/7wa3V/

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

Answer 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編碼的

Answer 3

在插件目錄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;
}

現在您可以像以前一樣調用該插件，或發送json（所有呈現為屬性的鍵）的值，即：

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

不幸的是，我無法對此進行測試（未安裝wordpress）。