html下拉框怎么用js添加新值

html-css09

html下拉框怎么用js添加新值,第1张

html下拉框怎么用js添加新值

javascript添加一个下拉列表项的方法:创建一个新的option节点,然后添加到目标select对象中去,关键代码如下:

1、var objSelect = document.getElementById(select_id)。

2、var new_opt = new Option(objItemText, objItemValue)。

3、objSelect.options.add(new_opt)。

实例演示如下:

1、HTML结构,包括一个select项,含有三个options。另外,设置input和button,通过自由父子,实现给select增加自定义option。

此时的显示效果如下,其中option中有三项。

2、JS的函数设计如下:

现有的options如下:

3、在页面上输入新的数据,点击添加。

此时的select效果显示如下,自由添加功能实现。

HTML中做一个可以输入的下拉框,需要用户添加label标签设置我们的下拉菜单选项的内容相应的选项值,然后设置select标签,在select标签内部设置option选项标签,设置文本框,设置label标签,显示文本框的说明文字,然后添加textarea标签,内部设置我们文本框的相关属性即可。具体操作步骤如下。

1、添加label标签设置我们的下拉菜单选项的内容相应的选项值,然后设置select标签,在select标签内部设置option选项标签,这里需要几个选项就设置几个标签。如下图所示。

2、将下拉菜单需要显示的每一个内容设置在option标签中,如图所示,预览的设置效果,在网页中我们可以看到一个下拉菜单。如下图所示。

3、有时候下拉菜单也需要设置一个默认的值,如果大部分内容都是相同的,可以将它设置为默认值,只需要在它相应的属性中设置为选中状态。如下图所示。

4、再次预览我们的网页,可以看到刚才设置checked的选项已经默认显示在了设置的下拉菜单中选中状态。如下图所以。

5、设置文本框,设置label标签,显示文本框的说明文字,然后添加textarea标签,内部设置文本框的相关属性。如下图所示。

6、最后,可输入下拉框制作完成。如下图所示。

注意事项:

HTML中做一个可以输入的下拉框按照上述步骤操作即可制作完成。