首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在WordPress中正确使用select2?

如何在WordPress中正确使用select2?
EN

Stack Overflow用户
提问于 2019-10-21 04:55:42
回答 1查看 1.8K关注 0票数 0

这个问题不是重复的,因为使用其他(类似)问题中的方法不起作用。

我有一个选择框:

代码语言:javascript
运行
复制
<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文件,并且控制台中没有错误。

我试过了:

代码语言:javascript
运行
复制
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,但这不会对我的选择框做任何事情。它不会添加类。它不会改变外观。没什么。

我也尝试过了(在代码中,在控制台中手动操作,没有错误);

代码语言:javascript
运行
复制
add_action( 'wp_head', function () { ?>
    <script>

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

    </script>
<?php } );

class='select2'分配给tot之后,他在代码中选择元素。没有任何效果,如果没有错误,我不知道从哪里开始。

EN

回答 1

Stack Overflow用户

发布于 2019-10-21 12:46:56

您需要在JS中使用dot作为class名称的前缀。因此,如果您的类被命名为select2,那么您的代码而不是

代码语言:javascript
运行
复制
jQuery('select2').select2({
    theme: "classic"
});

应该是

代码语言:javascript
运行
复制
jQuery('.select2').select2({ //See the Dot
    theme: "classic"
});

在您共享的超文本标记语言中,您的select具有order-statuses类。所以初始化select2的JS应该是

代码语言:javascript
运行
复制
jQuery('.order-statuses').select2();
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58477235

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档