javascript - 如何在 WordPress 中正确使用 select2?
问题描述
这个问题不是重复的,因为使用其他(类似)问题中的方法不起作用。
我有一个选择框:
<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'
tot后,他在代码中选择元素。没有任何影响,没有错误,我不知道从哪里开始。
解决方案
你需要在你的class
名字前面加上一个dot
in JS
。所以如果你的类被命名为select2
,你的代码而不是
jQuery('select2').select2({
theme: "classic"
});
应该
jQuery('.select2').select2({ //See the Dot
theme: "classic"
});
在您共享的 HTML 中,您的选择具有 class order-statuses
。所以要初始化的 JSselect2
将是
jQuery('.order-statuses').select2();
推荐阅读
- docker - Rexray 插件无法访问 EBS 卷并创建新卷
- python - 如何在单元格中删除包含“未命名”的python行?
- svelte - 苗条:应用程序/ld+json
- javascript - 单击复选框时如何设置标签标签的样式?
- c++ - 为什么在我的程序中输入另一个输入会给我不同的结果?
- android - 许可应用程序 android 解锁有用
- android - Android 应用程序在 OneSignal 推送通知上崩溃
- ruby-on-rails - 载波重新创建版本!损坏原始图像
- python-3.x - 无法在 Python 中重新启动 While 循环
- php - 错误:在 c 面板上使用密码 yes 拒绝用户“@localhost”访问