js怎么添加一个下拉列表的值
点下按钮就在<select>中添加一个<option>这里就是text的值</option>
求高手解答 展开
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效果显示如下，自由添加功能实现。
<script type="text/javascript">
aa=document.getElementById('a');
bb=document.getElementById('b');
ii=document.getElementById('i');
ab=document.getElementsByTagName("li");
aa.onclick=function()
{
if(bb.style.display=="none")
{bb.style.display="block";}
else
{bb.style.display="none";}
if(ii.style.borderBottom=='none'){
ii.style.borderTop='none';
ii.style.borderBottom='10px solid black';
}
else{
ii.style.borderBottom="none";
ii.style.borderTop="10px solid black";
}
}
for (var x=0;x<ab.length; x=x+1)
{
ab[x].onmouseover=function () {
this.style.background="white";
this.style.textDecoration="underline";
}
ab[x].onmouseout=function () {
this.style.background="#E9ECF3";
this.style.textDecoration="none";
}
}
</script>
扩展资料：
添加值
function addData1(){
//清空下拉选中的数据
$("#resType").empty();
$("#resType").append("<option value='1'>aaaaaa</option>");
$("#resType").append("<option value='2'>bbbbbb</option>");
}
javascript添加一个下拉列表项的方法：创建一个新的option节点，然后添加到目标select对象中去，关键代码如下：
var objSelect = document.getElementById(select_id);
var new_opt = new Option(objItemText, objItemValue);
objSelect.options.add(new_opt);
实例演示如下：
1、HTML结构
<select id="test">
<option value="1">option-1</option>
<option value="2">option-2</option>
<option value="3">option-3</option>
</select><br>
新增列表项<br> 值：<input type="text" id="val"/> 内容：<input type="text" id="txt"/><br>
<input type='button' value='添加' onclick="fun()"/>
2、javascript代码
function fun(){
var val = document.getElementById("val").value;
var txt = document.getElementById("txt").value;
var sel = document.getElementById("test");
var option = new Option(txt, val);
sel.options.add(option);
}3、效果演示
<script type="text/javascript">
function add(){
var option = null;
var first = document.getElementById("select");
option = document.createElement("option");
option.appendChild(document.createTextNode(document.getElementById("text").value));
option.vaule = document.getElementById("text").value;
first.appendChild(option);
}
</script>
html:
<body>
<label>
<input type="text" name="text" id="text" />
</label>
<label>
<button onclick="add()" >add</button>
</label>
<label>
<select name="select" id="select">
</select>
</label>
</body>
<html>
<head>
<script type="text/javascript">
function eaddOnePurview()
{
//获得select
var select1=document.form1.selects1;
//获得文本框的值
var text=form1.text1.value;
//创建option
var option = new Option(text,text);
//添加值
select1.options.add(option);
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1">
<select id="selects1"></select>
<input name="submit1" type="button" value="添加" onclick="eaddOnePurview()">
</form>
</body>
</html>
|
广告 您可能关注的内容 |
