在javascript中将textfield中的文本添加到selectbox中?

时间:2011-02-23 13:43:37

标签: javascript html

任何人都可以指出有关使用javascript将文本(用户)从文本字段添加到选择列表(点击按钮后)的好教程吗?

感谢

1 个答案:

答案 0 :(得分:3)

这是一个简单的jsfiddle,它展示了如何使用带有来自文本字段的输入动态地将选项添加到选择标记:

HTML:

<select id='myselect'></select>
<input type='text' value='' name='mytext' id='mytext' />
<button value='submit' id='mybtn' name='submit'>submit</button>

JavaScript的:

var myselect = document.getElementById('myselect');

function createOption(){
    var currentText = document.getElementById('mytext').value;
    var objOption = document.createElement("option");
    objOption.text = currentText ;
    objOption.value = currentText ;

    //myselect.add(objOption);
    myselect.options.add(objOption);
}

document.getElementById('mybtn').onclick = createOption;

基本上,HTML中有一个文本字段,一个按钮和一个选择框。提交按钮附带一个调用createOption函数的onclick事件。 createOption函数基本上创建一个选项元素,并将其添加到选择框中,选项文本和值等于文本字段中的文本。使用document.getElementsById,我们可以将新创建​​的元素注入Selectbox并从文本字段中检索插入的值。

但是,如果您正在寻找书面教程,这是使用JavaScript动态填充表单的一个很好的参考Creating a Form Dynamically

相关问题