Design

You don’t need JS, you just need to implement tags. This is what they are there for. They are dynamic and will only grab tags based on the current collection view. See wiki for collection tags.

Jamie is right. You want to filter the collection, so tags are the way to go. You can see an example here: http://www.helicopterheaven.com. When you click a tag it filters the collection. I have set it up so that filters that don’t match are not shown, but you can also set it so that tags are shown (but styled differently so people can tell visually what their options are).

I found this post from a while back, which I had forgotton about http://forums.shopify.com/categories/1/posts/23208

I have tried out the following code from the post (thanks to Caroline Schnapp for this by the way)

<select onchange="window.location = this.options[this.selectedIndex].value;">
{% assign vendorList = '' %}
{% for product in collection.all_products %}
{% capture compareVendor %}{{ product.vendor }}{% endcapture %}
{% if vendorList contains compareVendor %}{% else %}
<option value="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</option>
{% capture tempList %}{{ vendorList }}{{product.vendor}}{% endcapture %}
{% assign vendorList = tempList %}
{% endif %}
{% endfor %}
</select>

and it works, it displays a list of the vendors currently in the collection which can then be selected individually.

The only problem is that once you have selected a vendor from the drop down list only that vendor is shown in the drop down list. If you want to view the other vendors from the collection you have to hit the browser back button.

IS there a way to make the drop down always show all the vendors in a collection even when you have selected one of the vendors from the drop down.

Has anyone got any ideas on this? Would be really cool if I could get this sorted.