用js给select插入option
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js给select插入option相关的知识，希望对你有一定的参考价值。
我要做一个注册页面，有三个分别是年（1890年开始）、月、日的select生日选择，怎么用js添加？
1、使用innerhtml
<script>var shosetype=document.createElement("select"); //创建select标签
shosetype.setAttribute("id","sc");//设置select的id为“sc"
document.body.appendChild(shosetype);//将select添加到body
var option="<option value=\\"1\\">添加成功</option>";//新建options
shosetype.innerHTML=option;//将option添加到select
</script>
2、options.add
var obj=document.getElementById('mySelect'); //获取到id为'mySelect'的select元素
//添加一个选项
obj.add(new Option("文本","值")); //添加select的options 这个只能在IE中有效
obj.options.add(new Option("text","value")); //添加select的options 这个兼容IE与firefox 参考技术A
按下列排版输入下列代码：
if (data)
var jsonObject = eval(data.Table);
var selectSecond = $("#SelectSecond");
selectSecond.empty();
for (var i = 0; i < jsonObject.length; i++)
var Opt = new Option();
//var Opt = document.createElement("option");
Opt.value = jsonObject[i].numbers;
Opt.Text = jsonObject[i].notects;
selectSecond.options.add(Opt);
在前端
<select id="SelectSecond" onchange="selected()">
</select>
但是样没有反应，下拉框是空白的。jsonObject确实是有值的。
更多0
关于 select 的添加 option 应该注意的问题。
标准的做法如上
也就是说，标准的做法是 s.options.add();
但是如果你一定要用 s.appendChild(option);
注意了，你只能用如下两种方式之一:
1.
s.appendChild(option);
option.text = 'hello world';
option.value =3;
也就是，一定要先添加到 select 中，然后再为 option 赋值。否则在 FF 下是显示正常的，但是在 IE6 中显示的是空白
2. 如果你要讲 option.text 和 option.value 的赋值放在前面，那么请用 option.innerHTML 而不是 option.text
如下:
option.innerHTML = 'hello world';
opion.value = 3;
option.appendChild(option);
3 第三种解决方式。
var op=document.createElement("option"); // 新建OPTION (op)
op.setAttribute("value",0); // 设置OPTION的 VALUE
op.appendChild(document.createTextNode("请选择---")); // 设置OPTION的 TEXT
select.appendChild(op); // 为SELECT 新建一 OPTION(op)
select.options.length=0; //把select对象的所有option清除掉
select.options.remove(i); //把select对象的第i个option清除掉
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS动态添加删除option</title>
<script>
//动态删除select中的所有options：
function delAllOptions()
document.getElementById("user_dm").options.length=0;
//动态删除select中的某一项option：
function delOneOption(indx)
document.getElementById("user_dm").options.remove(indx);
// 动态添加select中的项option:
function addOneOption()
//document.getElementById("user_dm").options.add(new Option(2,"mytest"));
var selectObj=document.getElementById("user_dm");
alert(selectObj.length);
selectObj.options[selectObj.length] = new Option("mytest", "2");
</script>
</head>
<body>
<select id="user_dm" name="user_dm">
<option value="0" selecte>==请选择人员==</option>
<option value="1">test</option>
</select><br>
<input type="button" onClick="addOneOption()" value="添加">
<input type="button" onClick="delOneOption(1)" value="删除第一个">
<input type="button" onClick="delAllOptions()" value="清空">
</body>
</html>
===============================================================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js动态添加与删除Option对象</TITLE>
<script language="javascript">
// 添加选项
function addOption(pos)
var objSelect=document.getElementById("mySelect");
// 取得字段值
//var strName = document.myForm.myOptionName.value;
// var strValue = document.myForm.myOptionValue.value;
// 建立Option对象
var objOption = new Option("李高灰","bbbbbbbbb");
if (pos == -1&& pos > objSelect.options.length))
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
// 删除
function deleteOption(type)
var objSelect=document.getElementById("mySelect");
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
// 显示选项信息
function showOption()
var objSelect=document.getElementById("mySelect");
var name = objSelect.options[objSelect.selectedIndex].text;
var value = objSelect.options[objSelect.selectedIndex].value;
alert(name + " = " + value);
//动态删除select中的所有options：
function clearAllOptions()
var objSelect=document.getElementById("mySelect");
objSelect.options.length=0;
</script>
参考技术B var year = document.getElementById ("year");var date = new Date();
for ( var i = 1890; i < date.getFullYear() + 1; i++)
var opt = document.createElement ("option");
opt.value = i;
opt.innerText = i;
year.appendChild (opt);
<select id="year"></select>
类似的... 参考技术C <select id="Mmonth">
<option>1</option>
</select>
<input type="button" onclick="a()" value="添加"/>
<script>
function a()
document.getElementById("Mmonth").options.add(new Option(1, 1));
</script> 参考技术D js里用addOption方法，给select动态添加option。
以上是关于用js给select插入option的主要内容，如果未能解决你的问题，请参考以下文章
如何在 vue.js 2 中设置 v-select 中选择的选项值？