Next button to select next option of drop down menu with js

Question

<select id="form">
    <option value="1" >1 </option>
    <option value="2" >2 </option>
    <option value="3" >3 </option>
</select>
<button id='next'>Next</button>
<script>
    var select2 = document.getElementById("form");
    var lastselected2 = localStorage.getItem('select2');
    document.getElementById('next')
            .addEventListener('click', function(){
                  lastselected2 = parseInt(lastselected2) + 1;
            });

    if(lastselected2) {
        select2.value = lastselected2; 
    }

    select2.onchange = function () {
        lastselected2 = select2.options[select2.selectedIndex].value;
        console.log(lastselected2);
        localStorage.setItem('select2', lastselected2);
    }
</script>

I've this code that saves the selected of the dropdown and I wanted to add a button that can select the next option of the dropdown.

Ok. Is there a question in there? – rmlan Feb 15 '18 at 16:26 — rmlan, Feb 15 '18 at 16:26

zelda11 · Accepted Answer · 2018-02-15T16:41:32.303

3

<script>
function selectNext(){
  var select = document.getElementById('form');
  select.selectedIndex++;
}
</script>

<button id='next' onclick="selectNext()">Next</button>

This is a good option to find the actual index selected and go direct to the next one, by index.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex

edited Feb 15 '18 at 16:41

answered Feb 15 '18 at 16:36

zelda11

425
2
7

Hi Denza! What do you mean with the added? – zelda11 Feb 15 '18 at 16:52
incremented position is not saved – Denzadeud Feb 15 '18 at 16:58
What browser are you using? For me it was saved in chrome. https://jsfiddle.net/5koxmwed/ – zelda11 Feb 15 '18 at 16:59
chrome, and on page reload it just returns previously saved option – Denzadeud Feb 15 '18 at 17:18
Hi Denza, to save status you will always need some cookies or localStorage, in all contexts – zelda11 Feb 15 '18 at 17:30
I've found this case for that you're looking for https://stackoverflow.com/questions/10957926/saving-dropdown-menu-selection-in-a-cookie – zelda11 Feb 15 '18 at 17:31

score 0 · Answer 2 · answered Feb 15 '18 at 16:32

0

Try this?

var button = document.getElementById('next');
button.onclick = function() {
   select2.value = parseInt(lastselected2)+1;
}

Quick and dirty I know...

answered Feb 15 '18 at 16:32

Dan Clarke

246
2
11

Next button to select next option of drop down menu with js

2 Answers2