js下拉列表框操作示例总结
例子,js下拉列表框操作实例。
代码:
<html>
<head>
<title>JavaScript下拉列表框操作_www.jquerycn.cn</title>
<mce: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--;//下标变了
}
}
}
// --></mce: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="-->>" onclick="moveOption('leftSel','rightSel');">
<br>
<input type="button" id="moveOne" value="<<--" onclick="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;" mce_style="font-size:30px;">
</div>
</body>
</html>
向select对象添加option的2种常见方法。
方法1:
selectobj.options.add(option);
方法2:
option.appendChild(document.createTextNode("text"));
option.setAttribute("value","value");
selectobj.appendChild(option );
重要属性
1,options(为一个Option对象数组)
2,selectedIndex 为选中项的索引
重要方法
1,appencChild(option)添加一个选项
2,remove(0) 0表示索引号
您可能感兴趣的文章:
js下拉列表框操作示例总结
jquery获取form表单元素值的实例
jQuery select操作方法总结
JQuery 常用操作代码
jquery 操作input标签方法大全
jQuery 操作下拉列表框的实例分享
利用jquery操作select下拉列表框的代码
浅析jQuery对select操作小结(遍历option,操作option)
js如何获取下拉列表值与元素个数
JQuery 文本框操作的4个小例子