如何為過濾后的項目創建下拉列表

Question

因此，我對此很陌生，希望能為您提供足夠的信息。

當前，在此頁面http://klarolinefanficdirectory.tumblr.com/categories-2 （工作示例： http : //romanoffsbite.tumblr.com/fanfic-recs ）中，您可以在頂部看到很多過濾器/類別（甚至還沒有添加）。 顯然，當您單擊其中之一時，將過濾內容塊以僅顯示該類別。

我想做的是，不是在列出所有類別的情況下，而是在內容區域的上方放置一個下拉列表，該下拉列表將包括個人可以選擇的所有必要“類別”。

這可能嗎？ 我已經搜索，搜索，谷歌搜索和谷歌搜索，但似乎找不到與我要完成的兩個方面有關的任何事情。

這是“過濾器鏈接”的代碼

<!-- 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>部分的代碼，如果有幫助的話...

<html>
    <head>

    <!-----------

EVENT PAGE by clumhood

:> ------------>

    <title>FANFIC RECS</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        <link rel="apple-touch-icon" href="{PortraitURL-128}"/>

        <link href='http://fonts.googleapis.com/css?family=Roboto:700,400' rel='stylesheet' type='text/css'>

        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

        <script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Roboto:700,400:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

  <!------- filter scripts -------->
 <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
 <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
 <script>
 $(function(){

 <!------- filter scripts -------->
 <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
 <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
 <script>
 $(function(){

 var $container = $('#container');

 $container.isotope({
 itemSelector : '.story'
 });


 var $optionSets = $('#sort .option-set'),
 $optionLinks = $optionSets.find('a');

 $optionLinks.click(function(){
 var $this = $(this);
 // don't proceed if already selected
 if ( $this.hasClass('selected') ) {
 return false;
 }
 var $optionSet = $this.parents('.option-set');
 $optionSet.find('.selected').removeClass('selected');
 $this.addClass('selected');

 // make option object dynamically, i.e. { filter: '.my-filter-class' }
 var options = {},
 key = $optionSet.attr('data-option-key'),
 value = $this.attr('data-option-filter');
 // parse 'false' as false boolean
 value = value === 'false' ? false : value;
 options[ key ] = value;
 if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
 // changes in layout modes need extra logic
 changeLayoutMode( $this, options )
 } else {
 // otherwise, apply new options
 $container.isotope( options );
 }

 return false;
 });


 });
 </script>

 <!-----end filter scripts------>

 <!-----end filter scripts------>

        <style type="text/css">

body {
    font-family:arial;
    font-size:12px;
    background:#f8f8f8; /**this is the color of the bg.*/

}

a {
    color:#008997; /**this is the color of the links.*/
    text-decoration:none;
}

::-webkit-scrollbar {
background-color: white;
height:8px;
width:5px
}

::-webkit-scrollbar-thumb:vertical {
background-color:#f8f8f8;
height:50px
}

::-webkit-scrollbar-thumb:horizontal {
background-color:#505050;
height:8px!important
}


.top {
    text-align:left;
    padding-bottom:0px;
    margin-bottom:10px;
    margin-top:-9px;
    margin-left:-7px;
}


.top2 {
    width:1080px;
    background:white; /**this is the color of the filter titles topbar background.*/
    text-align:left;
    padding-bottom:0px;
    margin-bottom:10px;
    margin-top:10px;
    margin-left:-7px;
    line-height:20px;

}

#sort {
    padding:10px;
    text-align:center;
    font-family:'roboto', sans-serif;
    font-size:10px;
    text-transform:uppercase;
}

#sort a {
    margin-left:20px;
}

#sort a:hover {
    color:#bb2576; /**this is the color of the filter links when you hover over them.*/
}

.title {
    float:left;
    padding:15px;
    padding-top:20px;
    font-family:'roboto', sans-serif;
    font-size:12px;
    color:#bb2576;
    font-weight:normal;
}

.links {
    width:1100px;
    text-align:center;
    padding:30px;


}

.links a {
    font-family:'roboto', sans-serif;
    font-size:11px;
    text-transform:uppercase;
    padding:30px;
    margin-left:-3px;


}

.links a:hover {
    color:#b60079; /**this is the color of the links when you hover over them.*/

}

.links a:last-child {
}


#container {
    width:1080px;
    margin-top:10px;
}

#content {
    margin:10px;
    overflow:hidden;
    width:250px;
    height:250px;
    float:center;
    box-shadow:0px 3px 10px rgba(0,0,0,.15);
    text-align:left;
    line-height:150%;
    background:white; /**this is the color of the background of each event.*/
    transition-duration:1s;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
}



.desc {
    padding:10px;
    margin-top:10px;
    font-size:11px;
}


#content2 {
    margin:10px;
    overflow:hidden;
    width:250px;
    height:250px;
    float:left;
    box-shadow:0px 3px 10px rgba(0,0,0,.15);
    text-align:left;
    line-height:150%;
    background:#ffffff; /**this is the color of the background of each past event.*/
    transition-duration:1s;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
}

        </style>
        </head>

    <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 個解決方案

解決方案1
0 2016-01-09 00:20:43

如何為過濾后的項目創建下拉列表

問題描述

1 個解決方案

解決方案1 0 2016-01-09 00:20:43

解決方案1
0 2016-01-09 00:20:43