Auto select items-per-page (a drop down) using a Greasemonkey-like script

Question

If you take a look at this page, there's a drop down to show results per page: it can be 10, 20 or 50.

I would like a Greasemonkey-like script to simulate selecting 50 per page.

For ease of reference some of the HTML from the page is here:

<select><option value="10">10</option><option value="20">20</option><option value="50">50</option></select> per page

How can I achieve this, please?

Edits

URL updated with more than 20 items

This is for Greasekit on Fluid.app (which is very old, but I am restricted to using it). Brock reliably tells me it is very old and no longer updated. (I don't think I can even use jQuery)

Answer 1

Since that select is driven by jQuery, you can use jQuery to change it and trigger all the necessary javascript.

But your Greasemonkey script must use injection or @grant none mode, because you need to trigger the page's javascript functions.

A complete script for that sample page would be like:

// ==UserScript==
// @name        _Amazon-like store, auto select 50 items per page
// @include     https://dl.dropboxusercontent.com/u/5546881/*
// @grant       none
// ==/UserScript==

//-- $ not defined. Use jQuery
jQuery('#v_pagination_long select').val (50).trigger ('change');

---

Update:

Since the OP is not really using Greasemonkey, or a modern equivalent like Tampermonkey, @grant none is not supported.
Here is the same script using script injection, that will work on almost any browser+userscript-engine combo:

// ==UserScript==
// @name        _Amazon-like store, auto select 50 items per page
// @include     https://dl.dropboxusercontent.com/u/5546881/*
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
function GM_main () {
    jQuery('#v_pagination_long select').val (50).trigger ('change');
}

addJS_Node (null, null, GM_main);

function addJS_Node (text, s_URL, funcToRun, runOnLoad) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    if (runOnLoad) {
        scriptNode.addEventListener ("load", runOnLoad, false);
    }
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

---

Important:

1. That sample page shows 9 items max, so it's impossible to be 100% sure that the script is doing everything needed. With the OP's new sample page, verified that the script works on FF+GM and Chrome+TM.
2. The <select> is wrapped in a div with the id: v_pagination_long. Use that to help get the correct control.
3. That page uses various mouse events (not click), so it may be that more stateful approaches are needed (Can't tell for sure, see item 1). Not needed in this case for the demo page. See Choosing and activating the right controls on an AJAX-driven site for other pages.