下拉菜单的 onchange 事件

Question

下拉菜单的 onchange 事件

3

我的代码如下：

<!DOCTYPE html>
<html>
<body>
    <script>    
        function tab()
        {
            current=document.getElementById("test");
            next=document.getElementById("run");
            if(current.value!="-1")
            {
                next.focus()
            }
        }
    </script>
    <select id="test" onchange="tab()">
        <option value="-1">--select--</option>
        <option value="1" >TEST</option>
        <option value="2">RUN</option>
    </select>
    <input type="text" name="run"/>
</body>
</html>

定义：我有一个下拉菜单，其中有四个值。如果我在下拉菜单中将一个值更改为另一个值，则它会自动切换到文本框。根据我的代码，它可以正常工作。

但问题是，当我选择下拉菜单中的第一个值时，自动切换有效，并且再次从下拉菜单中选择相同的值时（自动切换无效）。我知道问题出现在事件中。没有任何更改，所以事件不会触发。请帮助我纠正这个问题。

- user2143039

5个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2575725 · Answer 1

尝试使用mouseup和keyup事件作为解决方法：

var current = document.getElementById("test");
var next = document.getElementById("run");
var open = false; //drop-down closed

var watchOpen = function() {
  open = !open; //inverse flag to identify state of drop-down
};

var tab = function() {
  if (!open && current.value !== "-1") {
    next.focus();
  }
};

<select id="test" onmouseup="watchOpen();tab();" onkeyup="watchOpen();tab();">
  <option value="-1">--select--</option>
  <option value="1">TEST</option>
  <option value="2">RUN</option>
</select>
<input type="text" id="run" /><!-- replaced name with id -->

- Romylussone · Answer 2

试试这个：

<!DOCTYPE html>
<html>
  <body>
    <select id="test" onchange="tab()">
      <option value="-1">--select--</option>
      <option value="1">TEST</option>
      <option value="2">RUN</option>
    </select>
    <input type="text" name="run" id="run" />
    <script type="text/javascript">
      function tab() {
        current = document.getElementById("test");
        next = document.getElementById("run");
        if (current.value != "-1") {
          next.focus();
          next.value = current.options[current.selectedIndex].text;
        } else {
          next.value = "";
        }
      }
    </script>
  </body>
</html>

- PSR · Answer 3

0

尝试使用onBlur()。它可以解决这个问题。

我认为这在HTML5中是可能的。

onselect

- PSR

它在下拉菜单中不起作用，因为根据我的情况，在更改下拉菜单值时，相应的标签和文本框将显示，并且在从下拉菜单中选择值后，它会自动移动到文本框中。如果我们使用onblur事件，只有在单击下拉菜单外部时才会触发事件。 - user2143039

在下拉菜单的onselect事件中是不可能的。 - user2143039

- Mallikarjuna Reddy · Answer 4

使用 onBlur() 替代 onchange()。 onBlur 事件在您离开对象而未必改变其值时触发。 onChange 事件仅在更改字段的值时才被调用。

请查看此处了解有关 events 的详情。

- Paul Lammertsma · Answer 5

没有id为run的元素，该元素被引用于：

document.getElementById("run");

你可能想要写的是：

<input type="text" name="run" id="run"/>