在 WordPress 中使用 jQuery 设置选择框的样式答案

【问题标题】：Styling Select box with jQuery in WordPress在 WordPress 中使用 jQuery 设置选择框的样式
【发布时间】：2010-07-09 21:09:10
【问题描述】：

只是尝试使用此插件在 WordPress 项目中使用 jQuery 设置选择框的样式。

http://plugins.jquery.com/project/stylish-select-box/

jQuery(document).ready(function(){
    // select box styles
    jQuery('#genre-dropdown').sSelect(); 
});

当我在选择框上调用它时，它会显示 .newListSelected（可样式化列表）的两个副本，而不是一个。下面是用于生成选择框的代码。

<?php 

$args = array(
    'taxonomy' => 'genre',
    'id'       => 'genre-dropdown',
);

wp_dropdown_categories( $args );

?>

我已经尝试过自定义分类法，并且在完全不同的页面上尝试了相同的结果。

【问题讨论】：

你能发布一些源代码或给我们一个页面链接吗？
您可以尝试验证您的 HTML 标记吗？有时无效的 HTML 会导致各种奇怪的行为，最好在一开始就将其排除。你可以在这里验证它：validator.w3.org

标签： jquery wordpress jquery-plugins drop-down-menu

【解决方案1】：

原来的 URL 已经失效了，我用SelectBoxIt 进行了测试。以下示例创建了一个管理菜单，其中显示了样式化的类别下拉菜单。关键细节是加载 jQuery 插件，添加捆绑的 WordPress 脚本作为依赖项，请参阅Don't dequeue WordPress jQuery。

文件wp-content/plugins/my-plugin/styled-dropdown.php：

<?php
/* Plugin Name: Styled Dropdown */

add_action( 'admin_menu', 'add_menu_so_3216591' );

function add_menu_so_3216591() 
{
    add_menu_page(
        'SI', 
        '<span style="color:#e57300;">SelectIt</span>', 
        'edit_pages', 
        'so-3216591', 
        'menu_page_so_3216591',
        '', // icon default for empty
        1  // create before Dashboard menu item
    );
}

function menu_page_so_3216591() 
{
    wp_enqueue_style( 
        'select-it', 
        'http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.7.0/jquery.selectBoxIt.css' 
    );
    wp_enqueue_style( 
        'jquery-ui', 
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css' 
    );
    # Will be used as dependency bellow
    wp_register_script(
        'select-it', 
        'http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.7.0/jquery.selectBoxIt.min.js'
    );
    # Main script and dependencies 
    wp_enqueue_script(
        'do-it', 
        plugins_url( '/js/', __FILE__ ) . 'do-it.js',
        array( 'jquery', 'jquery-ui-widget', 'select-it' ) // Dependencies: using bundled WordPress scripts (highly recommended)
    );
    ?>
    <div id="icon-post" class="icon32"></div>
    <h2>Testing Select Box It</h2>
    <p><?php wp_dropdown_categories( array( 'id'=>'select-it-dd' ) ); ?></p>
    <?php
}

还有文件wp-content/plugins/my-plugin/js/do-it.js：

jQuery(document).ready(function($) 
{   
    $("#select-it-dd").selectBoxIt(
    {
        theme: "jqueryui"
    });
});

【讨论】：