0

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.

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();
    });
});
  • Thanks for your answer Warwick, when I implemented this it gave a jQuery is not defined error. If I'm following your code then you were defining the jQuery with the $ in the brackets, which would then mean jQuery should fire whenever the code has a $. – CharlieJustUs Jul 15 at 10:16
  • Could I remove that and just have jQuery(function() { ? – CharlieJustUs Jul 15 at 10:57
  • Managed to sort it out! Needed to enqueue jQuery with the script. – CharlieJustUs Jul 15 at 11:05
  • One thing that's still not working is making the list perform an action, which I think is due to the fact that the class attribute from the parent li is part of the scripting that's in place. Is there a way to take the li class and add it to the option we created above? – CharlieJustUs Jul 15 at 12:13
  • @CharlieJustUs I have edited the answer and added in a function that will take the value of the select, and redirect to the url. Which is currently just a #. You can edit that and put whatever action you need into there. NB I have added in a CSS class "dropdown-toggle" to the select div. So the change function can target that element alone. – Warwick Jul 16 at 8:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.