How to dynamically change a select option in a dropdown using jQuery

Here is a nifty trick – if you have a select dropdown but want to have something a bit nicer in appearance and change the value of this drop down dynamically. Not sure what I am talking about?

Scenario 1: You have a WooCommerce website and have variations, these are in a select drop down. Maybe you want to have images for each variation and when the customer clicks on this image, it changes the variation to add to cart.

Scenario 2: You have a select drop down to filter posts but you want a nice image instead.

Both of these scenarios are not the only applications but you get the idea of what you can do with this quick bit of code.

Step 1: Create a select dropdown

Below is a bit of code that will create the select dropdown – for testing purposes we have simply added this dummy code. We will show you a real life application after.

Step 2: Add target to change the select option

The next step is to add whatever you want that will change the select value. This could be an image, icon, blurb, button or anything else you can think will work. For our purposes, we will use a blurb module. Go ahead and add your blurb module, upload a nice image or use an icon.

There is one key thing you need to do here, which is to add to the blurb module an ID that corresponds with the value of the select. In our example we have “web-design” as a value in the select option. We give one of the blurbs an ID of “web-design”, this way when they click this, it will tell our jQuery code which to change to. See the image below (1 = the value you want it to change)

One final thing we need to do here is to add the ID “custom-grid-control” to our row or section that the blurbs are in. This way we can target just these blurbs using jQuery.

Step 3: Add jQuery

The final step is to add the jQuery – we have added comments next to each line to tell you what it does – also watch the video at the bottom of this post which we explain it all in-depth if you need more help.

Step 4: Fine tune

And that’s it, now when you click on the blurb with the ID “web-design”, it will change the select to be Web Design, likewise, if you click on a blurb with an ID “social” it will change the select option to be the Social option.

Live example

Now we understand how we can do this, let’s show you a live example. We are (at the time of writing) working on a new layout pack for our plugin Divi Machine for projects. On this layout we decided to use this code. We have some projects and using Divi Machine, filtering them based on their categories.

We have set up the archive loop module and the filter module. In the filter module, we have specified just the categories to be an option to filter (make sure you select the option to update on the change field rather than the button). Now this is all set up we can filter our projects.

This is great but maybe we want to use images instead, we can use the technique above to do this. Add some blurbs to the page and make sure you give each one the ID that corresponds to the option value (the category slug). Now we have done this, add the jQuery code and when you click on the blurb, it will update the select dropdown in the filter and then filter the posts.

One thing to think of is in our example above we have added a div called “custom-filter-posts” around our dummy select dropdown – we need to make sure to add this same CSS class to our filter module in the CSS section.

We have also added some extra CSS to make things a little bit better (see below with comments)