Question

这似乎应该是非常容易做到的事情，但它是在清晨，我正在画一个空白。

我有一个包含％值的选择（用于缩放），并且将其作为下拉列表我希望有两个按钮（+和 - ）来遍历列表。

假设我有：

<button id="minusButton">-</button>
<select id="zoomSelect" onchange="zoom()">
      <option value="10">10%</option>
      <option value="20">20%</option>
      <option value="50">50%</option>
      <option value="100" selected="selected">100%</option>
</select>
<button id="plusButton">+</button>

每次按下按钮时，如何切换选择。同时确保它在100％和10％时很好地停止（即，如果我继续按+，则不会缠绕或抛出错误。）

非常感谢！

Answer 1

$(document).on('click', '#minusButton', function() {
  var selIndex = $("#zoomSelect").prop('selectedIndex');
  if (selIndex != 0) {
    $("#zoomSelect").val($('#zoomSelect option').eq(selIndex - 1).val());
    zoom();
  }
});
$(document).on('click', '#plusButton', function() {
  var selIndex = $("#zoomSelect").prop('selectedIndex');
  if (selIndex != $('#zoomSelect option').length - 1) {
    $("#zoomSelect").val($('#zoomSelect option').eq(selIndex + 1).val());
    zoom();
  }
});

function zoom() {
  console.log('zoomed');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="minusButton">-</button>
<select id="zoomSelect" onchange="zoom()">
      <option value="10">10%</option>
      <option value="20">20%</option>
      <option value="50">50%</option>
      <option value="100" selected="selected">100%</option>
</select>
<button id="plusButton">+</button>

点击事件可以这样写，以便更改选择框的值，并相应地触发缩放功能。

Answer 2

纯JS回答

基本上你需要获得selectedIndex并设置该索引。

document.getElementById("zoomSelect").selectedIndex将获取当前选择的索引，您可以根据加号或减号进行设置。

function zoom(isPlus) {
  var zoomSelect = document.getElementById("zoomSelect");
  var index = zoomSelect.selectedIndex;
  var length = zoomSelect.length;

  if (isPlus && (index < length - 1)) {
    zoomSelect.selectedIndex = index + 1;
  } else if (!isPlus && (index > 0)) {
    zoomSelect.selectedIndex = index - 1;
  }
}

<button id="minusButton" onclick="zoom(false)">-</button>
<select id="zoomSelect" onchange="zoom()">
      <option value="10">10%</option>
      <option value="20">20%</option>
      <option value="50">50%</option>
      <option value="100" selected="selected">100%</option>
</select>
<button id="plusButton" onclick="zoom(true)">+</button>

Answer 3

您可以使用selectedIndex来处理所选项目，例如

var $zoom = $('#zoomSelect'),
  len = $zoom.find('option').length;;
jQuery('#plusButton, #minusButton').click(function() {
  var op = (this.id === 'minusButton' ? -1 : 1);
  $zoom.prop('selectedIndex', function(idx, value) {
    var x = value + op;
    return x < 0 || x > len - 1 ? value : x;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="minusButton">-</button>
<select id="zoomSelect" onchange="zoom()">
  <option value="10">10%</option>
  <option value="20">20%</option>
  <option value="50">50%</option>
  <option value="100" selected="selected">100%</option>
</select>
<button id="plusButton">+</button>

Answer 4

找到一个副本，并附上答案 - Choose option from select list using next/previous button with jquery

所以这可以关闭。

通过按钮单击

4 个答案: