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>

我已经使用此代码保存所选的下拉列表，并且我想添加一个按钮，可以选择下拉列表的下一个选项。

Answer 1

试试这个？

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

我知道快速而肮脏......

Answer 2

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

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

这是一个很好的选择，可以找到所选的实际索引，并通过索引直接转到下一个索引。

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

下一步按钮，用js选择下拉菜单的下一个选项

2 个答案: