1

我有一个下拉框,允许在其中选择“类别”,如果更改它会加载新类别,如下面的代码所示。我已经引入了一个“子类别”系统,并且需要稍微修改这个代码。我发现以下信息非常有帮助:

如何通过jquery中的.on函数在多个选择器上附加不同的事件?.

但是,它并不能完全解决我的问题......我可以使用它为同一函数中的每个选择器运行两个单独的事件,但我需要在“类别”和“子类别”的事件中同时运行这两个事件被选中。尽管它们还需要能够单独运行,但如果只选择一个。我对 js/jquery 还很陌生,所以您可以提供的信息越多越好!非常感谢你!

    <script type='text/javascript'>
    $(document).ready(function()
    {
        $('select#selectCategory').change(function()
        {
            var cat = $('select#selectCategory').val();
            var subcat

            if(cat > 0)
            {
                var param = '&category_id=' + cat;
            }else{
                var param = '';
            }
            var href = './videoroom.php?action=video_gallery'+ param +'&page=1';
            window.location.href = href;
        });
    });
    </script>

这是与已编写的 jquery 代码相关的 HTML 部分:

        <select style="min-weight:100px;" name="filter_by_cat" id="selectCategory">
                <option value="0">All</option>
                <option value="9">Wizard101</option>
                <option value="10">Pirate101</option>
                <option value="11">Pet Derby</option>
                <option value="14">Misc/Fun</option>
        </select>

这是我为新创建的子类别添加的新位:

        <select style="min-weight:100px;" name="filter_by_subcat" id="selectSubCategory">
                <option value="0">All</option>
                <option value="21">General PvP</option>
                <option value="22">PvPC Matches</option>
                <option value="23">PvP Guides</option>
                <option value="24">Miscellaneous</option>
        </select>
4

1 回答 1

2

将事件侦听器添加到两个下拉列表中,并在更改时检查它们:

jsFiddle

$('#selectCategory, #selectSubCategory').change(function() {
    var cat = $('#selectCategory').val();
    var subcat = $('#selectSubCategory').val();

    var params = [
        'action=video_gallery',
        'page=1'
    ];

    if (cat > 0) {
        params.push('category_id='+ cat);
        if (subcat > 0) {
            params.push('subcategory_id='+ subcat);
        }
    }

    var href = './videoroom.php?'+ params.join('&');
    window.location.href = href;
});

我假设您只希望在选择主类别时考虑子类别选择。如果不是这种情况,请将第二个 if 语句移到第一个 if 语句之外。

我还稍微重构了您的代码,使其更易于扩展和(IMO)更清洁。我将所有参数添加到一个数组中,最后它们只是加入它们。如果您需要添加更多参数,只需将它们也放入数组中。

于 2013-06-14T19:50:22.640 回答