Question

我有一个带有select元素的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

Answer 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>

Answer 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>

Answer 3

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

如何用jQuery选择以前的选项？

3 个答案: