Question

如果在输入到文本框并单击添加按钮的值后，如何在选择框（下拉列表）中选择新添加的值？

<html>
  <head>
    <script>
      function addref(value) {
        var x = document.getElementById("thebox");
        var option = document.createElement("option");
        option.text = value
        x.add(option,x.options[null])
      }
    </script>
  </head>
  <body>
    <form>
      <select id="thebox">
      </select>
    </form>
    <br>
    <input type="text" id="theinput"/>
    <input type="button" value="Add" name="B1" onclick="addref(document.getElementById('theinput').value)"/>
  </body>
</html>

Answer 1

试试这个：

x.selectedIndex = x.options.length - 1;

在此之后，您可以使用

检索值

var val = x.value;

或

var val = x[x.selectedIndex].value;

<select> at MDN

此外，而不是x.add(option,x.options[null])而是简单地使用x.add(option)。这将在option的末尾添加新创建的options。第二个参数应该是一个整数，它表示添加新选项的索引位置。

Answer 2

要获取所选值，请使用：

var e = document.getElementById("thebox");
var theValue = e.options[e.selectedIndex].value;

要获取所选文本，请使用：

var e = document.getElementById("thebox");
var theText = e.options[e.selectedIndex].text;

它是否是动态添加无关紧要。

动态添加值后，在选择框中选择一个值

2 个答案: