如何为WordPress类别窗口小部件和存档窗口小部件创建自定义样式选择框

Question

我已设法使用this code from codepen为WordPress存档和类别小部件创建自定义选择框。它适用于所有浏览器，除了链接不能按预期工作，即选择一个选项时，它应该使用选项中的链接进入类别页面。

默认情况下，下面是WordPress 选择代码：

<div id="categories-2" class="widget_categories widget">
    <div class="widgettitle">
        <h3>Categories</h3>
    </div>
    <select name="cat" id="cat" class="postform">
        <option value="-1">Select Category</option>
        <option class="level-0" value="10">Education&nbsp;&nbsp;(2)</option>
        <option class="level-0" value="8">Entertainment&nbsp;&nbsp;(2)</option>
        <option class="level-0" value="11">Finance&nbsp;&nbsp;(2)</option>
    </select>
</div>

---

以下是添加the JavaScript code from codepen后的WordPress 选择代码

<div id="categories-2" class="widget_categories widget">
    <div class="widgettitle">
        <h3>Categories</h3>
    </div>
    <div class="select">
        <select name="cat" id="cat" class="postform select-hidden">
            <option value="-1">Select Category</option>
            <option class="level-0" value="10">Education&nbsp;&nbsp;(2)</option>
            <option class="level-0" value="8">Entertainment&nbsp;&nbsp;(2)</option>
            <option class="level-0" value="11">Finance&nbsp;&nbsp;(2)</option>
        </select>
        <div class="select-styled">"Select Category"</div>
            <ul class="select-options" style="display: none;">
                <li rel="-1">Select Category</li>
                <li rel="10">Education&nbsp;&nbsp;(2)</li>
                <li rel="8">Entertainment&nbsp;&nbsp;(2)</li>
                <li rel="11">Finance&nbsp;&nbsp;(2)</li>
            </ul>
        </div>
    </div>
</div>

正如您所看到的，我使用的JavaScript代码将选项标记<option>更改为<li>标记，value=""更改为rel=""。以下是执行更改的JavaScript代码。

$('select').each(function(){
    var $this = $(this), numberOfOptions = $(this).children('option').length;

    $this.addClass('select-hidden'); 
    $this.wrap('<div class="select"></div>');
    $this.after('<div class="select-styled"></div>');

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);

    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').each(function(){
            $(this).removeClass('active').next('ul.select-options').hide();
        });
        $(this).toggleClass('active').next('ul.select-options').toggle();
    });

    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        //console.log($this.val());
    });

    $(document).click(function() {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

我不是JavaScript专家，我需要有人帮助我更改代码，以便在选择框中选择的链接将您带到引用的类别或存档页面。