方法和详细的 *** 作步骤如下：
1、第一步，创建一个新的HTML文件，并将其命名为“index.html”，见下图，转到下面的步骤。
2、第二步，执行完上面的 *** 作之后，在index.html文件中编写选择框的html代码，以实现选项的效果，见下图，转到下面的步骤。
3、第三步，执行完上面的 *** 作之后，在页面上加载zdjquery-1.3.2.min.js文件，并编写Jquery代码以获取所有选项的选项值。
通过each（）方法迭代所有选项值，并将其存储在select_con数组中，见下图，转到下面的步骤。
4、第四步，执行完上面的 *** 作之后，使用answer
console.log（）打印阵列并运行代码以查看阵列的内容，见下图，转到下面的步骤。
5、第五步，执行完上面的 *** 作之后，可以看到该数组已成功获取select中所有option的值，见下图，转到下面的步骤。
6、第六步，执行完上面的 *** 作之后，通过map（）方法获取选项值，并将结果返回到结果变量，见下图，转到下面的步骤。
7、第七步，执行完上面的 *** 作之后，通过get（）方法将获取的对象转换为数组，并将其存储在select_con数组中，见下图。这样，就解决了这个问题了。
按下列排版输入下列代码：
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/htmlcharset=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/htmlcharset=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>
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效果显示如下，自由添加功能实现。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）