如何使用 javascript 选择选择框？ [复制]答案

【问题标题】：How do I select a select box with javascript? [duplicate]如何使用 javascript 选择选择框？ [复制]
【发布时间】：2017-08-01 12:16:30
【问题描述】：

如何使用 javascript 选择或聚焦 <select> 框？ .select() 可以很好地使用 jQuery 选择输入，但它对选择框没有任何作用。尝试选择当前选择的选项也不起作用。

更新： 人们对这个问题有两种误解。

首先，这不是如何选择文本输入的重复。正如我已经说过的，用于选择文本框的常用方法不起作用。
我没有尝试检索或设置选择框的选定索引。我只想选择一般的选择框，就像在表单中切换时一样。

更新 2：

好的，我想出了问题所在，这使得这个问题变得毫无意义。由于来自 Chrome 控制台的测试怪癖，.focus() 什么也没做，这让我相信它毫无用处。我想这就是我最终使用.select() 的原因，当我从 Chrome 控制台进行测试时，它明显有效，但不适用于选择框。当我从 javascript 文件中尝试 .focus() 时，它起作用了。我猜当 Chrome 控制台处于焦点时，您无法以编程方式将内容集中在实际页面中。经验教训。

【问题讨论】：

selectElement.selectedIndex = 2?你是说复选框吗？
示例 - html，您尝试过的脚本会有所帮助。
尝试设置 selectedIndex: html.spec.whatwg.org/multipage/…
我不是想在选择框中选择一个选项，而是尝试做相当于 jQuery 的.select() 方法。聚焦选择框，就像您在表单中切换时一样。
@Moss 绝对是重复的，请使用.focus()。 .select() 根本不选择文本框，而是选择其中的文本。即使您看不到对象已聚焦，它也是如此。从字面上搜索“.focus javascript”并查看 w3schools 示例，将元素从锚点更改为选择框。

标签： javascript forms

【解决方案1】：

我认为您正在寻找focus() 方法。

focus() 方法用于赋予元素焦点（如果可以专注）。

示例：

<html>
  <body>
    <select id="mySelect">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>
    <script>
        function Function() {
           document.getElementById("mySelect").selectedIndex.focus();    
        }
    </script>

  </body>
</html>

【讨论】：

这如何回答我的问题？
“尝试选择当前选择的选项也不起作用。”？您不想检索该特定选项的选定索引吗？
不，我要选中选择框。
@Moss 很抱歉，请您重新更新您的描述，您的描述结构似乎有歧义。
我添加了“焦点”这个词，试图让它比现在更清晰。

【解决方案2】：

document.getElementById("mySelect").selectedIndex = "2";

来自 W3C：

selectedIndex 属性设置（或返回）下拉列表中选定选项的索引。

索引从 0 开始。

注意：如果下拉列表允许多选，它只会返回选择的第一个选项的索引。

注意：值“-1”将取消选择所有选项（如果有）。

注意：如果未选择任何选项，则 selectedIndex 属性将返回 -1。

因此，要设置它，请将属性 selectedIndex 分配给您要选择的数字索引。

或者你可以使用

document.getElementById("mySelect").value = "foo";

并将 value 属性设置为所需选项的名称。

您可能还想在此处查看 W3C 上的选择 DOM 对象页面：

https://www.w3schools.com/jsref/dom_obj_select.asp

【讨论】：

请再次阅读问题。我更新了。

【解决方案3】：

嘿@Moss，如果你想选择或关注一个选择元素，你可以使用.focus()。我做了一个demo，让你看得更清楚。

【讨论】：

请再次阅读问题。我更新了。
嘿，您是说希望
我也更新了我的答案。可以使用 jquery .focus() 来关注选择元素。但是显示 select 元素的选项列表比较棘手，我没有快速的解决方案