-1

使用 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>
4

2 回答 2

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>

观察者：没有测试它。进行必要的调整。

于 2013-01-24T17:16:32.980 回答
0 
<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/

于 2013-01-24T17:33:27.427 回答