Как правильно использовать select2 в WordPress? - PullRequest
Новая
       10

Как правильно использовать select2 в WordPress?

0 голосов
/ 20 октября 2019

Этот вопрос не является дубликатом, потому что использование методов в других (похожих) вопросах не работает.

У меня есть поле выбора: 

<select id="order-statuses" name="order-status" class="order-statuses" >
                    <option value="all" <?php selected( 'all', $current_value );?> ><?php esc_html_e( 'All', 'my-text-domain' ); ?></option>
                    <?php
                    if( ! empty ( $order_statuses ) ) :
                        foreach( $order_statuses as $order_status => $label ) : ?>
                            <option value="<?php echo esc_attr( $order_status ); ?>" <?php selected( $order_status, $current_value );?> ><?php echo esc_html( $label ); ?></option>
                    <?php
                        endforeach;
                    endif;
                    ?>
                </select>

Я пытаюсь получить select2работает с этим select, но все, что я пытаюсь сделать, работает, select2 появляется для правильной загрузки файлов CSS и JS в заголовке моего сайта, и в консоли нет ошибок.

Я пробовал: 

function enqueue_select2_jquery() {
    wp_register_style( 'select2css', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css', false, '1.0', 'all' );
    wp_register_script( 'select2', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'select2css' );
    wp_enqueue_script( 'select2' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_select2_jquery' );
function select2jquery_inline() {
    ?>
<style type="text/css">
.select2-container {margin: 0 2px 0 2px;}
.tablenav.top #doaction, #doaction2, #post-query-submit {margin: 0px 4px 0 4px;}
</style>
<script type='text/javascript'>
jQuery(document).ready(function ($) {
    if( $( 'select' ).length > 0 ) {
        $( 'select' ).select2();
        $( document.body ).on( "click", function() {
             $( 'select' ).select2({
                  theme: "classic"
             });
          });
    }
});
</script>
    <?php
 }
add_action( 'admin_head', 'select2jquery_inline' );

То, что должно использовать select2 на ВСЕХ, выбирает аналогично, но это никак не влияет на мой блок выбора. Это не добавляет класс. Это не меняет внешний вид. Ничего.

Я также пытался (в коде и вручную в консоли без ошибок); 

add_action( 'wp_head', function () { ?>
    <script>

        jQuery('select2').select2({
            theme: "classic"
        });

    </script>
<?php } );

После назначения class='select2' tot он выбирает элемент в коде. Ничто не имеет никакого эффекта, и без ошибок я не знаю, куда идти дальше.

1 Ответ

0 голосов
/ 21 октября 2019

Вам нужно добавить префикс class к dot в JS. Поэтому, если ваш класс назван как select2, ваш код вместо 

        jQuery('select2').select2({
            theme: "classic"
        });

должен быть 

        jQuery('.select2').select2({ //See the Dot
            theme: "classic"
        });

В HTML-коде, которым вы поделились, ваш выбор имеет класс order-statuses. Таким образом, JS для инициализации select2 будет 

    jQuery('.order-statuses.).select2();
...