js怎么添加一个下拉列表的值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js怎么添加一个下拉列表的值相关的知识，希望对你有一定的参考价值。
做个<input type="text"/>
点下按钮就在<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>本回答被提问者采纳 参考技术D 这个问题其实很简单
<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>
js中怎么获得本页下拉菜单选定的值
首先设置下拉列表控件的id属性<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>
1:拿到select对象： var myselect=document.getElementById("test");
2:拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index。
3:拿到选中项options的value： myselect.options[index].value;
4:拿到选中项options的text： myselect.options[index].text;
另外还有jquery的方法（前提是已经加载了jquery库）：
1:var options=$("#test option:selected"); //获取选中的项
2:alert(options.val()); //拿到选中项的值
3:alert(options.text()); //拿到选中项的文本 参考技术A <select id = "cityList" >
<select id = "selectId" >
<option value = "0">第0个</option>
</select>
<script>
var selectObj = document.getElementById('selectId');
// 通过对象添加option
selectId.add(new Option("第一个","1"))
selectId.add(new Option("第二个","2"))
// 通过id添加option
selectId.add(new Option("第三个","3"))
selectId.add(new Option("第四个","4"))
// 通过id添加方法（也可以通过对象添加方法）
selectId.onchange = function()
// 通过对象获取value和text
alert(selectObj.value);
alert(selectObj.options[selectObj.selectedIndex].text);
// 通过 id 获取value和text
alert(selectId.value);
alert(selectId.options[selectId.selectedIndex].text);
// 还可以通过this获取value和text
alert(this.value);
alert(this.options[this.selectedIndex].text);
;
</script>
以上是关于js怎么添加一个下拉列表的值的主要内容，如果未能解决你的问题，请参考以下文章