You can create a custom shortcode wrapper that will execute the shortcode with the desired attributes, so you would use [jobs-custom]
in the page:
add_shortcode('jobs-custom', 'custom_jobs_shortcode');
function custom_jobs_shortcode($atts) {
if (is_user_logged_in()) {
$per_page = get_user_meta(get_current_user_id(), 'jobs-per-page', true);
}
if (!isset($per_page) || !$per_page) {
if (isset($_COOKIE['jobs-per-page'])) {$per_page = $_COOKIE['jobs-per-page'];}
else {$per_page = 10;}
}
return do_shortcode('[jobs per_page="'.$per_page.'"]');
}
Then add an earlier action to check for a querystring value and set the user meta/cookie…
add_action('init', 'custom_set_jobs_per_page');
function custom_set_jobs_per_page() {
if (isset($_REQUEST['jobs-per-page'])) {
$per_page = absint($_REQUEST['jobs-per-page']);
if ($per_page > 10) {
if (is_user_logged_in()) {update_user_meta(get_current_user_id(), 'jobs-per-page', $per_page);}
else {setcookie('jobs-per-page', $per_page, (time()+(7*24*60*60);}
}
}
}
With this in place you can add the javascript onchange
function to your <select>
input:
<script>function change_jobs_per_page() {
el = document.getElementById('jobs-per-page-select');
perpage = el.options[el.selectedIndex].value;
href = window.location.href;
if (href.indexOf('jobs-per-page=") > -1) {
href = href.split("jobs-per-page=");
window.location.href = href[0]+"jobs-per-page="+perpage;
} else if (href.indexOf("?') > -1) {
window.location.href = href+'&jobs-per-page="+perpage;
} else {
window.location.href = href+"?jobs-per-page="+perpage;
}
}</script>
<select id="jobs-per-page-select' onchange="change_jobs_per_page();">
The advantage of this approach is that the new per page value is persistent until changed by the user (or the user cookie expires.)