stackoom
  简体   繁体   中英

How to Create a Drop Down List for Filtered Items

 原文  2016-01-09 00:02:03  0   1    javascript/ jquery/ html/ css

Question

So, I'm kind of new to this, so i'm hoping I provide enough information for you.

Currently, on this page http://klarolinefanficdirectory.tumblr.com/categories-2 (working example: http://romanoffsbite.tumblr.com/fanfic-recs ) you can see a ton of filters/categories at the top (there are even more that haven't been added yet). Obviously, when you click on one of them, then the blocks of content are filter to display just that category.

What I would like to do is, instead of having all categories just listed, to have a drop down list right above the content area that would then include all of the necessary "categories" that individuals can select from.

Is this possible to do? I've searched and searched and googled and googled and I just can't seem to find anything that is related to the 2 aspects I would like to accomplish.

Here is the code for the "Filter Links" 

<!-- 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>

Here is the code for the drop down list styling I was looking to use: 

<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>

Here is the code for the <body> section of the page, if this helps at all... 

<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>

So, really, any assistance at all would be amazing! I'm trying to help someone out with their resource blog and I want it to be easy to navigate :)

1 answers

solution1
 0  2016-01-09 00:20:43

Sure, but it can be kind of tedious. Basically, you would just filter your results with arrays and auto-population

Here's a toy example:

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;
    }
  });

});

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question dynamically create items in drop down list in bootstrap How to style Drop Down list items how to create drop down list using Mootools? how to create drop down list in java script? How to create a drop-down menu for 100 menu items? How to print drop down menu items as a list in a textbox How to reset the value of my input items from a drop down list Create dynamic Drop Down List Fetch filtered data from the drop down list and present in another drop down list Jquery click event for drop down list items
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM