Jump Menu - switch New Item order, or fast move

[Matt24300509381w]

Hi I use the Jump Menu to post chronological items for multiple entities. However, whenever you click the '+' to add a new item to the list, the new item populates at the bottom of the existing list. Each entry I add needs to move up to the top of the list since it is newest first.

Again, however, the Up and Down arrow functions within the Jump Menu only allow moving each item one space at a time. Some of the lists I am adding to have dozens of existing entries. 

There MUST be a way to either add a New Item to the TOP of the list, or a "to the top" arrow to allow me to move the newly added item directly to the top of the list without dozens of clicks. I add multiple new items to hundreds of entities, so I honestly spend much of the day just clicking the "Up" arrow moving each indvidual item from the bottom of the list, up to the top, one click at a time, over and over. 

Please help there must be a better way to add New Items to the top of the list, or to have a way to move an entry from the bottom of the list to the top in less clicks.

[Ben M]

You could add the entries manually in the code.  There's no way to solve for this via the UI that I am aware of.

[osgood_]

You could do this within the page using javascript.

I mean jump menus are thing of the past, I dont think they are used much these days but as an example:

Your Dreamweaver jump menu probably looks something like below in code view:

<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
<option value="https://www.link1.com">link 1</option>
<option value="https://www.link2.com">link 2</option>
<option value="https://www.link3.com">link 3</option>
<option value="https://www.link4.com">link 4</option>
<option value="https://www.link5.com">link 5</option>
</select>

Using the below javascript or similar which was unique to Dreamweaver.

<script>

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

</script>

Now IF you want all the list items <option> tags in reverse order so the last one appears at the top add the below script at the bottom of the page where the jump menu appears, directly before the closing </body> tag.

<script>
function selectOption(selectClass) {
const jumpMenuOptions = document.querySelectorAll(`${selectClass} option`);
const jumpMenu = document.querySelector(`${selectClass}`);
jumpMenu.innerHTML = '';
const optionsList = []
jumpMenuOptions.forEach(function(option) {
optionsList.push(option.outerHTML);
})
const optionsReverse = optionsList.reverse();
optionsReverse.forEach(function(option) {
jumpMenu.innerHTML += `${option}`;
});
}

selectOption('.jumpOne');

</script>

Now give your jump menu select tag a class name: Below the class name is "jumpOne".

<select name="jumpMenu" id="jumpMenu" class="jumpOne" onchange="MM_jumpMenu('parent',this,0)">

Make sure the class name you give the select tag is identical to what is in the <script></script> block, just before the closing </script> (note the full point before the name below, that needs to be there BUT do NOT include the full point in the select tags class name).

selectOption('.jumpOne');

Thats it! When the page loads it should reverse the order of your jump links.

If you have more than one jump menu on the page just give the select tag a unique class name and add another selectOption(' ') after the first one, example:

<select name="jumpMenu2" id="jumpMenu2" class="elephant" onchange="MM_jumpMenu('parent',this,0)">

selectOption('.elephant');

[Matt24300509381w]

Unfortunately, I am not a coder, and I am kind of stuck maintaing an outdated website - while the Jump Menu UI is clunky, it's the best chance I have. I do appreciate the assistance though.

[osgood_]

Unfortunately, I am not a coder, and I am kind of stuck maintaing an outdated website - while the Jump Menu UI is clunky, it's the best chance I have. I do appreciate the assistance though.

By @Matt24300509381w

You dont need to be a coder to do this, just be able to copy and paste.

Open your page in code view (make a back up of the page first), copy and paste the below script directly before the closing </body> tag, near the end of the page:

<script>
function selectOption(selectClass) {
const jumpMenuOptions = document.querySelectorAll(`${selectClass} option`);
const jumpMenu = document.querySelector(`${selectClass}`);
jumpMenu.innerHTML = '';
const optionsList = []
jumpMenuOptions.forEach(function(option) {
optionsList.push(option.outerHTML);
})
const optionsReverse = optionsList.reverse();
optionsReverse.forEach(function(option) {
jumpMenu.innerHTML += `${option}`;
});
}

selectOption('.jumpOne');
</script>

Then just locate your jump menu select tag in the code and add class="jumpOne"

When the page loads your jump list options should be in reverse order. You can continue to input your option links via the UI.