Inpecting elements in the Web Devloper Plugin

Changing the sort order on a select dropdown

In a previous post how can i use my local css on a remote website I mentioned GreaseMonkey and it’s magical powers for doing things from your browser on remote websites. I’m going doing the same thing once again this time I want to change the sort order on a drop down within the new Control Panel for Blacknight that I use for my websites.

On the dashboard screen of the control panel you have a list of your websites in a dropdown letting you access them rather quickly. Why they aren’t sorted alphabetically I’m not entirely sure ( though I’ll possibly look into it a bit later on as we’ve a number of requests coming in for this change. It’s third party software  we’re using though so we’re limited ultimately as to what we can change. ) So lets get cracking and change the dropdown sort order with jquery.

For now though I’m going to create a small little grease monkey script to change the sort order on the drop down. You can see below the order is a bit random.

Random sort order on the domains list.

Creating the following little GreaseMonkey script that only fires when we’re on https://cp.blacknight.com. (Code below)

// ==UserScript==
// @name        CP Sort
// @namespace   https://cp.blacknight.com
// @include     https://cp.blacknight.com/*
// @version     1
// ==/UserScript==

var my_options = $("#sel_websites_select option");

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    else return 0
})

$("#sel_websites_select").empty().append( my_options );

Where did I get the ID for the dropdown?

The Firefox webmaster tools plugin has an element inspector … running it on the page and hovering over the dropdown we see the following:

Inpecting elements in the Web Devloper Plugin

Running GreaseMonkey now and we end up with our drop down looking like

Sorted drop downl list

That’s kinda shiny even if I do say so myself. I keep on thinking of new uses for GreaseMonkey everyday.

We’ll want to make another tweak to our script and grab the selected value or it’ll end up with the last item selected ( at least in Firefox not sure how other browsers handle it)

Our final greasemonkey script ends up as

// ==UserScript==
// @name        CP Sort
// @namespace   https://cp.blacknight.com
// @include     https://cp.blacknight.com/*
// @version     1
// ==/UserScript==

var selected = $("#sel_websites_select").val();
var my_options = $("#sel_websites_select option");

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    else return 0
})

$("#sel_websites_select").empty().append( my_options );
var selected = $("#sel_websites_select").val(selected);

Just so you’re aware this is a completely unsupported thing and just me hacking about with things. Now to see if I can’t simply add these tweaks to the main Control Panel templates. So everyone has this option by default when they login.

1 thought on “Changing the sort order on a select dropdown

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.