如何使箭头更改下拉选项

Question

如果我有一个类似以下的下拉菜单：

<select>
    <option>Dog</option>
    <option>Cat</option>
    <option>Bird</option>
</select>

如何创建两个按钮，这些按钮在按下时会更改所选选项？ 因此，如果选择“ Cat并按下向上箭头，则“ Dog将被选中。 向下箭头也会发生同样的情况。 当选择“ Dog并单击向下箭头时，“ Cat将被选中。

Answer 1

您可以这样做：

 var ddl = document.getElementById("s") function change(x) { if (x.value === 'down') { ddl.selectedIndex = ddl.selectedIndex + 1 } else { ddl.selectedIndex = ddl.selectedIndex - 1 } };

 <select id="s"> <option>Dog</option> <option>Cat</option> <option>Bird</option> </select> <input id="d" type="button" value="down" onclick="change(this); return false;"> <input id="u" type="button" value="up" onclick="change(this); return false;">

Answer 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script>
<script>
$(document).ready(function(){
$("#up").click(function(){
var selecteddata = $("#data option:selected").val();
  var next = parseInt(selecteddata)-1;
  $("#data").val(next.toString());
});

$("#down").click(function(){
var selecteddata = $("#data option:selected").val();
  var next = parseInt(selecteddata)+1;
  $("#data").val(next.toString());
 });
});
</script>
</head>
<body>

<select id="data">
<option value="0">Dog</option>
<option value="1">Cat</option>
<option value="2">Bird</option>
</select>
<input type="button" value="UP" id="up" />
<input type="button" value="Down" id="down" />
</body>
</html>

如何使箭头更改下拉选项

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-07-17 13:48:44

解决方案2
0 2018-07-17 13:57:20

如何使箭头更改下拉选项

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-07-17 13:48:44

解决方案2 0 2018-07-17 13:57:20

解决方案1
0 已采纳 2018-07-17 13:48:44

解决方案2
0 2018-07-17 13:57:20