Question

使用javascript，（没有jQuery库）

我想要做的是当我在输入框中键入一个值并按下我的回车键（仅在文本框中）时，我想将输入框的值添加到下拉框中。

请注意，如果下拉框中已存在现有值，则应将下一个值添加到现有值之下。

如何设置？

这是html设置：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="text" id="theinput" style="width: 100px;">

<select id="thebox" style="width: 100px;"></select>

</body>

</html>

Answer 1

首先 - 让我们添加一个事件监听器，当用户按下某个键时会触发该事件监听器

第二次 - 让一个函数传递你想要获取用户输入的元素并在文档中设置值

第三次 - 让我们创建dom元素并将其添加到您创建的 out元素中：

<script>
    //your input element
    var in = document.getElementById("theinput");
    //step 2
    function addItem(e) {
      //check if user press Enter
        if (e.keycode == 13) {            
            var out = document.getElementById("thebox");

            //step 3
            var optionElement = document.createElement("option"); //will create al <option> tag
            var text = document.createTextNode(in .value); //the value you inserted
            optionElement.appendChild(optionElement); // add the text to <option>
            out.appendChild(optionElement); // add the option to <select>
        }
    }
//Step 1 - add Eventlistener
  in.addEventListener("keydown", addItem, false);
</script>

Obs：没有测试过。进行必要的调整。

Answer 2

<html>
<head>
<script>
function displayResult(event)
{
if(event.keyCode == 13)
{
var x=document.getElementById("thebox");
var option=document.createElement("option");
var txtv=document.getElementById("theinput");
option.text=txtv.value;
try
  {
  // for IE earlier than version 8
  x.add(option,x.options[null]);
  }
catch (e)
  {
  x.add(option,null);
  }
}
}

</script>
</head>
<body>
<form>
<select id="thebox">
</select>
</form>
<br>
<input type="text" id="theinput" onkeyup="displayResult(event)"/>
</body>
</html>

jsFiddle http://jsfiddle.net/RYh7U/49/

中的链接

将inputbox中的值添加到组合框中

2 个答案: