如何使用 javascript、jquery 或其他一些巧妙的方式在 select 中提交下一个选项？答案

【问题标题】：How to submit the next option in a select with javascript,jquery, or some other clever way?如何使用 javascript、jquery 或其他一些巧妙的方式在 select 中提交下一个选项？
【发布时间】：2014-11-17 08:48:27
【问题描述】：

我有一个 php 页面，我想将 NEXT SELECTION 功能添加到我的选择中。

这是我的代码：

<form action='' method='GET' id='searchSelect'>
   <select name='search'>
      <option>beer</option>
      <option>chips</option>
      <option selected>BACON</option>
      <option>CHEESE</option>
      <option>poutine</option>
   </select>
   <input type='submit'>
   <button>NEXT SELECTION</button>
</form>

我觉得我应该能够聚焦选定的（在本例中为 BACON）并使用带有按钮的 JavaScript 提交它（奶酪），但我不确定如何正确实现这一点。任何建议将不胜感激。

a FIDDLE HERE

编辑：澄清我的问题：我的选择中有一个很长的列表，在进行选择时，重新选择选项栏并选择列表中的下一个选项很痛苦。我希望用户能够单击下一步，它会在当前 SELECTED 选项之后提交列表中的下一个。该页面是 php，当单击它时，它会使用 GET 方法提交到当前页面。加载页面时，它会获取 GET(name=search) 并将其设置为在页面上使用一些 php 选择。

【问题讨论】：

你需要做什么？将一些数据发送到另一个页面（然后您可以删除提交按钮并使用 Javascript Ajax）然后？
将您的步骤放在一些容器中，例如 div .. 它们可以在表单中 .. 在第 1 步下一步按钮单击隐藏第 1 步 .. 显示第 2 步 .. 等等，最后一步有提交按钮而不是下一个 ..

标签： javascript php jquery html

【解决方案1】：

使用 jQuery（简化版）：

$("select").find("option:selected").next().prop("selected",true);

See fiddle（e.preventDefault() 是显示值已更改 - 提交删除该行）

更新

使用:selected 而不是[selected] 来获取当前选择的选项，而不是原来的选择..

Updated fiddle

【讨论】：

这个 jQuery 答案似乎最适合我正在寻找的东西。谢谢。

【解决方案2】：

你可以在任何你需要的地方编写代码，在这种情况下是在提交时

JavaScript：

function selectNext(){
  document.getElementById("mySelect").selectedIndex = document.getElementById("mySelect").selectedIndex + 1;
}

HTML：

<button onclick="selectNext()">Next</button>

纯 JavaScript 代码。

【讨论】：

jQuery 到这个：$("#mySelect")[0].selectedIndex += 1;
我确实将 jquery 放在了标题中，但没有明确说明。 jquery 或其他方式就可以了。
@AshiqueCM，问题标题：...javascript,jquery, or some other clever way?...