如何选择带有javascript的选择框?

时间:2017-03-11 01:57:08

标签: javascript forms

如何使用javascript选择或关注<select>框? .select()适用于使用jQuery选择输入,但它对选择框没有任何作用。尝试选择当前选择的选项也不起作用。

更新 人们用两种方式误解了这个问题。

  1. 首先,这不是如何选择文本输入的重复。正如我已经说过的,用于选择文本框的常用方法不起作用。

  2. 我没有尝试检索或设置选择框的选定索引。我只想让选择框一般选择,就像你在表格中进行选项一样。

  3. 更新2:

    好的,我弄清楚问题是什么导致这个问题没有实际意义。由于Chrome控制台的测试很奇怪,.focus()没有做任何事情,这让我觉得它毫无用处。我想这就是为什么我最终使用.select(),当我从Chrome控制台测试时显然有效,但是对于选择框不起作用。当我从javascript文件中尝试.focus()时,它就可以了。我想当Chrome控制台处于焦点时,您无法以编程方式将实际页面中的内容集中在一起。经验教训。

3 个答案:

答案 0 :(得分:0)

我认为您正在寻找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>

答案 1 :(得分:0)

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

来自W3C:

selectedIndex属性在下拉列表中设置(或返回)所选选项的索引。

索引从0开始。

注意:如果下拉列表允许多个选择,它将仅返回所选第一个选项的索引。

注意:值“-1”将取消选择所有选项(如果有)。

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

因此,要设置它,请将selectedIndex属性指定给您要选择的数字索引。

或者您可以使用

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

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

您可能还想在此处查看W3C上的Select DOM对象页面:

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

答案 2 :(得分:0)

嘿@Moss如果你想选择或专注于一个选择元素,你可以使用.focus()。我做了一个demo所以你可以更清楚地看到它。