I am running a plugin called Divi Staff to show the staff on the website. I don't like how the specialisms are displayed and wanted to convert them to a dropdown list. I have tried to get this to work and followed a whole bunch of similar questions on here and Stackoverflow, tried to implement what they suggested and I am getting nowhere fast.

I have created a Fiddle with the list working correctly, but when I implement it on the testing site, it refuses to work. Can someone help me figure out why this script isn't firing on the site?

My testing server is /. Any tips gratefully received.

I am running a plugin called Divi Staff to show the staff on the website. I don't like how the specialisms are displayed and wanted to convert them to a dropdown list. I have tried to get this to work and followed a whole bunch of similar questions on here and Stackoverflow, tried to implement what they suggested and I am getting nowhere fast.

I have created a Fiddle with the list working correctly, but when I implement it on the testing site, it refuses to work. Can someone help me figure out why this script isn't firing on the site?

My testing server is http://testing.burton-sweet.co.uk/team/. Any tips gratefully received.

• jquery
• dropdown
• list

Share Improve this question edited Jul 12, 2019 at 11:44 CharlieJustUs asked Jul 12, 2019 at 11:35 CharlieJustUsCharlieJustUs 333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

@CharlieJustUs when you use Fiddle is automatically sets the $ variable for you. When your script tries to run on your site, that variable is not set, and it fails.

Try this please.

jQuery(document).ready(function($) {
    $(function() {
        $('ul.clearfix').each(function() {
            var $select = $('<select class="dropdown-toggle" />');
            $(this).find('a').each(function() {
                var $option = $('<option />');
                $option.attr('value', $(this).attr('href')).html($(this).html());
                $select.append($option);
            });
            $(this).replaceWith($select);
        });
    });

    // This will grab the value the select is being set to and redirect to the link
    $('select.dropdown-toggle').on('change', function(){
       window.location.href = $( this ).val();
    });
});