Question

所以，我对此有点新意，所以我希望我能为您提供足够的信息。

目前，在此页面http://klarolinefanficdirectory.tumblr.com/categories-2（工作示例：http://romanoffsbite.tumblr.com/fanfic-recs），您可以在顶部看到大量过滤器/类别（还有更多尚未添加的内容）。显然，当您单击其中一个时，内容块将被过滤以显示该类别。

我想要做的是，而不是只列出所有类别，在内容区域正上方有一个下拉列表，然后包含所有必要的＆＃34;类别＆＃34;个人可以选择。

这可能吗？我搜索和搜索，谷歌搜索和谷歌搜索，我似乎无法找到任何与我想要完成的两个方面有关的事情。

以下是＆＃34; Filter Links＆＃34;

的代码

detached

以下是我想要使用的下拉列表样式的代码：

<!-- FILTER LINKS -->

<center><div class="top2">
    <div id="sort">
<ul id="filters" class="option-set clearfix" data-option-key="filter">

<!-- CHOOSE A FILTER NAME FOR EACH TYPE OF EVENT. DONT TOUCH THE FIRST LINK .story THIS IS YOUR MAIN FILTER FOR EVERY EVENT. CHANGE THE NAME OF YOUR FILTER: EX .smt or .festival -->
<a href="#filter" data-option-filter=".story">All</a>
<a href="#filter" data-option-filter=".10cent">10th Century</a>
<a href="#filter" data-option-filter=".1920s">1920s</a>
<a href="#filter" data-option-filter=".ah">All Human</a>
<a href="#filter" data-option-filter=".alternate">Alternate Dimension</a>
<a href="#filter" data-option-filter=".amnesia">Amnesia</a>

以下是页面<select style="width: 150px; border: 0px solid; padding: 3px; color: #000; background-color: #f1f1f1; font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1px;" onChange="location.href=this.options[this.selectedIndex].value;"> <option value="/">CATEGORY</option> <option value="URL GOES HERE">NAME GOES HERE</option> <option value="URL GOES HERE">NAME GOES HERE</option> </select>部分的代码，如果这有帮助的话......

<body>

所以，真的，任何帮助都会令人惊叹！我试图通过他们的资源博客帮助某人，我希望它易于导航：）

Answer 1

当然，但这可能有点单调乏味。基本上，您只需使用数组和自动填充

过滤结果

这是一个玩具示例：

https://jsfiddle.net/wss01rsf/

var one = ['a', 'b', 'c'];
var two = ['d', 'e', 'f'];
var three = ['option', 'another option'];
$(function() {
    $('#first').on('change', function(e) {
    $('#second').remove();
    $('<select id="second"></select>').insertAfter('#first');
    console.log($('#first option:selected').text());
    switch($('#first option:selected').text()) {
        case '1':
        one.forEach(function(el) {
            $('#second').append($('<option>' + el + '</option>'));
        });
        break;
      case '2':
        two.forEach(function(el) {
            $('#second').append($('<option>' + el + '</option>'));
        });
        break;
      case '3':
          three.forEach(function(el) {
            $('#second').append($('<option>' + el + '</option>'));
        });
        break;
      case 'ignore':
        break;
    }
  });

});

如何为筛选的项目创建下拉列表

1 个答案: