如何在 WordPress 中正确使用 select2？

Posted 2023-05-07

【中文标题】如何在 WordPress 中正确使用 select2？

【英文标题】：How to properly use select2 in WordPress?

【发布时间】：2020-02-17 00:11:46

【问题描述】：

此问题不重复，因为使用其他（类似）问题中的方法不起作用。

我有一个选择框：

<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 与此选择一起工作，但我没有尝试任何工作，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' 分配给代码中的选择元素后。没有任何效果，没有错误我不知道从哪里开始。

【参考方案1】：

您需要在JS 中为您的class 名称添加dot 前缀。所以如果你的类被命名为select2，你的代码而不是

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

应该是

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

在您共享的 HTML 中，您的选择具有 order-statuses 类。所以JS初始化select2会是

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

【讨论】：

我认为这只是我草率的副本，以表明我通过类和元素进行了尝试。在第二组中，选择应该找到所有元素并将它们变成 select2。

我的问题似乎是加载问题或加载时间问题。我认为 jQuery 在此实例中运行后，WordPress 正在加载选择。我有部分工作搞砸了，所以我认为情况就是这样。不过感谢您的帮助。