js下拉列表框操作总结

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript强化训练--下拉列表的操作01</title>
<script language="JavaScript" type="text/javascript">

//移动下拉框被选中选项
//fromSelId :源下拉框id
//toSelId :目标下拉框id
function moveOption(fromSelId,toSelId){
var fromSel = document.getElementById(fromSelId);
var toSel = document.getElementById(toSelId);

if(fromSel==null||toSel==null){
return false;
}

for(var i = 0;i < fromSel.options.length;i++){
var _option = fromSel.options[i];
//是否选中
if(_option.selected){
//往目标下拉框加添加选项
toSel.appendChild(_option);
i--;//下标变了
}
}
}

</script>
</head>

<body bgcolor="abcdef">
<form id='demoFrm' name="demoFrm" method="post" action="" >

<table border="1" align="center" width="300">
<tr>
<td colspan="3" align="center">下拉列表操作的演示</td>
</tr>
<tr>
<td align="center" width="100">
<select multiple="multiple" size="10" id="leftSel">
<option value="1">第一个理拉框的值1</option>
<option value="2">第一个理拉框的值2</option>
<option value="3">第一个理拉框的值3</option>
<option value="4">第一个理拉框的值4</option>
</select>
</td>
<td align="center" width="100">
<input type="button" id="moveTwo" value="-->>" οnclick="moveOption('leftSel','rightSel');">
<br>
<input type="button" id="moveOne" value="<<--" οnclick="moveOption('rightSel','leftSel');">
</td>
<td align="center" width="100">
<select multiple="multiple" size="10" id="rightSel">
<option value="1">第二个理拉框的值1</option>
<option value="2">第二个理拉框的值2</option>
<option value="3">第二个理拉框的值3</option>
<option value="4">第二个理拉框的值4</option>
</select>
</td>
</tr>
</table>

</form>

<div id="showContent" style="font-size:30px;">
</div>
</body>
</html>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>JavaScript强化训练--下拉列表的操作01</title> <script language="JavaScript" type="text/javascript"> //移动下拉框被选中选项 //fromSelId :源下拉框id //toSelId :目标下拉框id function moveOption(fromSelId,toSelId){ var fromSel = document.getElementById(fromSelId); var toSel = document.getElementById(toSelId); if(fromSel==null||toSel==null){ return false; } for(var i = 0;i < fromSel.options.length;i++){ var _option = fromSel.options[i]; //是否选中 if(_option.selected){ //往目标下拉框加添加选项 toSel.appendChild(_option); i--;//下标变了 } } } </script> </head> <body bgcolor="abcdef"> <form id='demoFrm' name="demoFrm" method="post" action="" > <table border="1" align="center" width="300"> <tr> <td colspan="3" align="center">下拉列表操作的演示</td> </tr> <tr> <td align="center" width="100"> <select multiple="multiple" size="10" id="leftSel"> <option value="1">第一个理拉框的值1</option> <option value="2">第一个理拉框的值2</option> <option value="3">第一个理拉框的值3</option> <option value="4">第一个理拉框的值4</option> </select> </td> <td align="center" width="100"> <input type="button" id="moveTwo" value="-->>" οnclick="moveOption('leftSel','rightSel');"> <br> <input type="button" id="moveOne" value="<<--" οnclick="moveOption('rightSel','leftSel');"> </td> <td align="center" width="100"> <select multiple="multiple" size="10" id="rightSel"> <option value="1">第二个理拉框的值1</option> <option value="2">第二个理拉框的值2</option> <option value="3">第二个理拉框的值3</option> <option value="4">第二个理拉框的值4</option> </select> </td> </tr> </table> </form> <div id="showContent" style="font-size:30px;">
</body> </html>
向select对象里添加option的2中常见方法

方法1:

Js代码
var option = new Option(text,value);//注意参数1为文本显示值,参数为value值
selectobj.options.add(option);
var option = new Option(text,value);//注意参数1为文本显示值,参数为value值 selectobj.options.add(option);
方法2:

Js代码
var option = document.createElement("option");
option.appendChild(document.createTextNode("text"));
option.setAttribute("value","value");
selectobj.appendChild(option );
var option = document.createElement("option"); option.appendChild(document.createTextNode("text")); option.setAttribute("value","value"); selectobj.appendChild(option );


重要属性

1 ,options(为一个Option对象数组)

2 ,selectedIndex 为选中项的索引

重要方法

1, appencChild(option)添加一个选项

2, remove(0) 0表示索引号
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值