# Blog dropdown topic filter not working

**URL:** <https://community.hubspot.com/t/blog-dropdown-topic-filter-not-working/9144>\
**Category:** CMS Development\
**Created:** [June 13, 2018, 4:30pm UTC](https://community.hubspot.com/t/blog-dropdown-topic-filter-not-working/9144 "2018-06-13T16:30:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vjaramillo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vjaramillo/32/99782_2.png) [@vjaramillo](https://community.hubspot.com/u/vjaramillo)\
**Post date:** [June 13, 2018, 4:30pm UTC](https://community.hubspot.com/t/blog-dropdown-topic-filter-not-working/9144/1 "2018-06-13T16:30:48Z")

</div>

Hi,

After contacting support I was told to use the code below

```auto
<select id="blog-topics">
	<option>Filter by topic</option>
	{% for topic in contents_topics %}
		<option value="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</option>
	{% endfor %}
</select>

```

As you can see [here](https://app.hubspot.com/design-previewer/1951002/templates/5300009535) the dropdown displays but nothing happens when a topic is selected. I think this could be because some code is missing but I am not sure what exactly.

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [June 13, 2018, 5:42pm UTC](https://community.hubspot.com/t/blog-dropdown-topic-filter-not-working/9144/2 "2018-06-13T17:42:02Z")

</div>

That looks like half of the solution, but there is no logic for anything that happens after the dropdown is used.

Drop this script somewhere into your template

```auto
<script>
$(function(){
 $('#blog-topics').on('change', function(){
 var link = $(this).val();
 if(link != "Filter by topic"){
 window.location.href = link;
 }
 });
});
</script>

```

* * *

[tim@belch.io](mailto:tim@belch.io)

---

<div class="post-metadata">

**Author:** ![vjaramillo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/vjaramillo/32/99782_2.png) [@vjaramillo](https://community.hubspot.com/u/vjaramillo)\
**Post date:** [June 14, 2018, 8:57am UTC](https://community.hubspot.com/t/blog-dropdown-topic-filter-not-working/9144/3 "2018-06-14T08:57:19Z")

</div>

Hi Tim,

Thanks for your help.

This seems to partly work. I have added the script and when a topic is selected it filters the blogs and shows those with the selected topic which is great. However, once you have selected a topic, if you click on the drop-down only that topic appears to choose from and all the other topics are no longer available. Please see [here](https://www.ve.com/blog).

Do you know why this is? and is there a way to fix this?

I am copying the code used here for your reference

HTML

```auto
<select id="blog-topics">
	<option>Filter by topic</option>
	{% for topic in contents_topics %}
		<option value="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</option>
	{% endfor %}
</select>

```

JS

```auto
<script>
$(function(){
 $('#blog-topics').on('change', function(){
 var link = $(this).val();
 if(link != "Filter by topic"){
 window.location.href = link;
 }
 });
});
</script>

```

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [June 14, 2018, 12:36pm UTC](https://community.hubspot.com/t/blog-dropdown-topic-filter-not-working/9144/4 "2018-06-14T12:36:11Z")

</div>

I would probably use this HUBL instead:

```auto
{% set my_topics = blog_topics('default', 250) %}
<select id="blog-topics">
	<option>Filter by topic</option>
	{% for item in my_topics %}
		<option value="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</option>
	{% endfor %}
</select>

```

It seems that ‘content\_topics’ might only be getting the list of tags used for the particular blog post you are currently landed on, whereas the above code retrieves the list of all used tags in blog posts. Keep in mind, I say “used” because I think the list will omit unused blog tags.

* * *

[tim@belch.io](mailto:tim@belch.io)

---

<div class="post-metadata">

**Author:** ![mik3mitchell](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mik3mitchell/32/13512_2.png) [@mik3mitchell](https://community.hubspot.com/u/mik3mitchell)\
**Post date:** [February 11, 2020, 9:19pm UTC](https://community.hubspot.com/t/blog-dropdown-topic-filter-not-working/9144/5 "2020-02-11T21:19:57Z")

</div>

Thank you for this! Works great!

Do you know how you would do the same thing with post archives?

---

<div class="post-metadata">

**Author:** ![jonburdon](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonburdon/32/9373_2.png) [@jonburdon](https://community.hubspot.com/u/jonburdon)\
**Post date:** [May 19, 2020, 11:47am UTC](https://community.hubspot.com/t/blog-dropdown-topic-filter-not-working/9144/6 "2020-05-19T11:47:03Z")

</div>

I’d really like to see this working for Months too, with a select field which opens blogs from that month when clicked. This is because I’m using select and option tags for all the other navigation and I’d like to keep consistent styling. Any thoughts appreciated.