如何动态的给html页面中的下拉列表添加一行值,也就是说原来有三个选项,现在多加一项!

如何动态的给html页面中的下拉列表添加一行值,也就是说原来有三个选项,现在多加一项!,第1张

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档<销桥猜/title>

<script type="text/javascript">

function add(){

var option = null

var temp= document.getElementById("select")

option = document.createElement("option")

option.appendChild(document.createTextNode(document.getElementById("textfield").value))

option.vaule = document.getElementById("textfield").value

temp.appendChild(option)

}

</script>

</head>

<body>

<label>

<input type="text" name="textfield" id="textfield" />

</label>

<label>

<input type="submit" name="button" id="亏型button" value="添加" onclick="add()"/>

</label>

<label>

<select name="select" id="select">

<option value="消薯111">111</option>

<option value="222">222</option>

</select>

</label>

</body>

</html>

如果你对Html比较熟悉的话肯定知道有个<form</form的HTML标记。在<form与</form之间有诸如类型(type)为Text、Password、Button、Submit、Reset等的标记(元素)。我们这里所说的动态的添加Form项就是指动态的添加<Form</Form中的Text元素。那么如何去实现动态的添加Form项呢? 我们先分析分析实现动态添加form项的思路。如果是让您自己或用诸如FrontPage、DreamWeaver静态编写Html文档来增加一个又一个类型为text的form元素的话。您肯定是写完第一个类型为text的form元素后,再会加入第二个类型为text的form元素,就这样一直加到满足数目条件为止。我们先不说在加一个新的类型为text的元素时,应该毁悔将已亏余尘经存在且有内容、类型也为text的其他form元素也显示出来。上面所说的通过静态编写Html文档来增加类型为text的form元素的方法,其实就是我们在ASP程序文件中实现动态添加类型为text的form元素的基本思路。如何去得到已经存在且有内容、类型也为text的其他form元素的内容呢?在ASP程序中通过request.form(TextFieldName)可以得到。其中的TextFieldName是指<form</form中名字为TextFieldName的项。就是指<form<input type=text name=TextFieldName</form中的TextFieldName。现在我们知道如何得到了表单的内容了,那么我们就可以通过这种方法来得到已经存在且有内容、类型为text的form元素的值了。再在显示这些已经有值的text项时,我们就可以把所得到的值赋给相应的项。接下来,我们又会想如何去知道一共有多少个有内容、类型为text的form项呢?我们可以通过以下这种方法来得到。那就是通过request.form(TextFieldName)的Count属性来得到。这是因为在得到表单中多个类型为Text并且同名的form元素时,我们能得到的是一组值,也就说它们的值是放在一个名为TextFieldName的集合之中。而此时的count属性就是统计这个集合中同类元素的数目的,这样我们就可以知道一共有多少个这样的类型为text的form元素了,并且可以用循环语句与count属性取出集合各自的值。您可能会问:那么我们又如何才能得到这个集合中每一个名为TextFieldName类型为text的form的元素的值呢?在此之前我们先定义一个变量I,它的初始值为1,其实这个变量I就是我们在做循环时的变量。接下来我们就可以通过request.form(TextFieldName)(I)的方法来获取每一个名为TextFieldName的类型为text的form元素的值了。还有一点要注意,就是我们在将已经有值、类型也为text的form元素的值取出赋给相应项并显示出来的时候,我们还应该再增加一个新的类型为text的form项。为什么呢?这是为了让我们还可以再接着继续添加新的值。不然的话,在取出所有已经有值的类型为text的form元素后,您就没有继续添加新值的地方了,那也就成不了动态添加Html文档中Form项了。所以呢,您一定不能忘记这很重要的一点。现在我们知道如何取得这些满足条件的类型为text的form的元素数目了,也知道如何分别获取它们各自的值了。那么我又如何去控制只仅仅将已经有值、类型为text的form的元素呢?以及我们倒底如何去实现上面所说的一销禅切呢?那么接下来我会给出它的源代码,并且会在有些地方加上注释或给出解释。

JavaScript:

var op1 = new Option()

op1.innerHTML = '选项'

document.getElementsByName('select')[0].innerHTML += op1

jQuery

$('派雹锋select').eq(0).append($("<option>肆念选项</尘晌option>"))


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11977225.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存