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

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中，获得下拉列表的值，可以通过select对象的value属性取得， *** 作方法如下。

设备：联想电脑

系统：win8

软件：js2.14

1、首先新建一个html文件，命名为test.html，在test.html页面，创建一个form表单，下面将通过form表单对象来取得selet下拉框的值。

2、在form表单里面，创建一个select下拉框列表，其选项有三个，分别是选择一，选择二，选择三，三个选项分别有不同value值。

3、在form表单的下面，创建一个button按钮，并给它绑定一个onclick点击事件，当按钮被点击时，执行getvalue（）函数。

4、在getvalue（）函数内，通过document对象获得表单myForm下面的mySelect下拉列表对象，并通过其value属性取得选中选项的值。

5、然后在getvalue（）函数内，将获得的下拉列表选项的值，通过alert()方法以d窗的形式显示出来。

6、最后在浏览器打开test.html页面，选择下拉列表的值，点击按钮，获得选项的值。

在

HTML中，下拉列表和列表框的代码都是<select><option

/>...</select>，它们的主要区别是：显示的形式不同。

下拉列表框只露出一行，同时只能选择一行。不占地方，其它数据都藏在下拉列表的里面。

列表框的数据可以显示出多行，可以同时选择多行。其余的数据也可以藏在列表框的里面，这个数由用户设置属性决定。size=决定露出的行数，multiple决定可以同时选择多行。

1）下拉列表的代码:（以居住地为例）

居住地：

<select

name=“s1”

size="1">

默认size=1，只显示一行，只能选择一行

<option

value="北京"

selected>北京</option>

<option

value="上海">上海</option>

<optionvalue="天津">天津</option>

<optionvalue="武汉">武汉</option>

......

</select>

它们在一个文本框里只显示出来一行，显示哪一行由selected属性来决定，其它的选项由用户点击下拉列表的向下三角，拉开里边的所有选项进行选择，一次只能选择一项。

2）列表框的代码

<select

name=“s1”

size="4"

multiple>

size确定显示4行，multiple决定可以同时选择多项

<option

value="北京"

>北京</option>

<option

value="上海">上海</option>

<optionvalue="天津">天津</option>

<optionvalue="武汉">武汉</option>

<optionvalue="合肥">合肥</option>

......

</select>

---