怎样用JS给option添加“选中”属性?

JavaScript0194

怎样用JS给option添加“选中”属性?,第1张

一、解析字符串。

首先:考虑应该字符串解析成数组。

var ps = value.split(",")

然后:循环该数组。

for(var i = 0i <ps.lengthi++) {

//比较逻辑稍后写

}

二、循环select的option。

首先:获取要操作的select对象。假设要操作的select的ID为update_v_peripheral

var o = document.getElementById("update_v_peripheral")

然后:循环获取到的select对象。

for(j=0j<o.lengthj++){

//此处写比较逻辑

三、综合以上,进行业务处理。

var ps = value.split(",")

var o = document.getElementById("update_v_peripheral")

for(var i = 0i <ps.lengthi++) {

for(j=0j<o.lengthj++){  

if(o.options[j].value==ps[i]){               

o.options[j].selected = 'selected'

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

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效果显示如下,自由添加功能实现。

按下列排版输入下列代码:

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>