如何使用 jQuery 选择上一个选项？答案

【问题标题】：How select the previous option with jQuery?如何使用 jQuery 选择上一个选项？
【发布时间】：2017-09-29 12:50:44
【问题描述】：

我有一个带有如下选择元素的 html 页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
 </select>
  <br>
  <br>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <button onclick="ToTheNext()" id="btnext">Next</button>
</body>
</html>

我正在使用按钮 OnClick 上的这个简单功能将所选项目更改为下拉菜单的下一个选项：

function ToTheNext()
{
    $('#ExSelect option:selected').next().attr('selected', 'selected');
}

我的问题是：如何使用Vanilla JavaScript 或jQuery 将所选项目更改为该标签的上一个选项？

Jsbin 示例：https://jsbin.com/nuyeduf/edit?html,js,output

【问题讨论】：

只使用prev() 而不是next()
就像@ToniMichelCaubet 所说，只需使用prev() 而不是next()
和 .prop('selected', true) 而不是 .attr('selected', 'selected');
我现在感觉很笨......
@Pv-Viana 我们去过那里：P

标签： javascript jquery html

【解决方案1】：

两个问题 - 首先通过使用 attr，您将多个选项设置为选中，这可能不是您想要做的，因为它会阻止 prev() 按预期工作。

像这样更改您的代码：

function ToTheNext()
{
    $('#ExSelect option:selected').next().prop('selected', true);
}

function ToThePrevious()
{
    $('#ExSelect option:selected').prev().prop('selected', true);
}

https://jsbin.com/xewopobasi/1/edit?html,js,output

如果您使用的是 jQuery，请停止使用 onclick 属性，而是适当地分配点击处理程序

$('#btnext').on('click', function(){
    $('#ExSelect option:selected').next().prop('selected', true);
});

$(function(){

  $('#btnext').on('click',function(){
    $('#ExSelect option:selected').next().prop('selected', true);
  });

  $('#btprev').on('click',function(){
    $('#ExSelect option:selected').prev().prop('selected', true);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
 </select>
  <br>
  <br>
  <button id="btnext">Next</button>
  <button id="btprev">Prev</button>

【讨论】：

我只在这个例子中使用了 onclick 属性。感谢您提供非常好的答案！

【解决方案2】：

将.attr('selected', 'selected'); 替换为.prop('selected', true);

next() 与prev()

并在按钮下添加jQuery 脚本。

const select = $('#ExSelect');

function next()
{
   select.find('option:selected').next().prop('selected', true);
}

function prev()
{
  select.find('option:selected').prev().prop('selected', true);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ExSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<button onclick="next()" id="btnext">Next</button>
<button onclick="prev()" id="btprev">Prev</button>

【讨论】：

也许你的意思是prop()？
不，prev 找到第一个匹配项的前一个，这意味着使用 attr 将无法正常工作。

【解决方案3】：

使用$('#ExSelect option:selected').prev().prop('selected', true);

【讨论】：