注意:Option中的O是要大写的,不然语法报错
1.动态创建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2.添加选项option
function addOption(){
//根据id查找对象,
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}
3.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;
6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;
7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
8.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<head>
<script language=JavaScript>
function $(id)
{
return document.getElementById(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海"))
var myOption1=document.createElement("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
function choice()
{
var index=$("area").selectedIndex;
var val=$("area").options[index].getAttribute("value")
if(val==10)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement("select")
sh.add(new Option("浦东新区","101"))
sh.add(new Option("黄浦区","102"))
sh.add(new Option("徐汇区","103"))
sh.add(new Option("普陀区","104"))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement("select")
nj.add(new Option("玄武区","201"))
nj.add(new Option("白下区","202"))
nj.add(new Option("下关区","203"))
nj.add(new Option("栖霞区","204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context").childNodes.length-1;
alert(x)
}
function remove()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}
</script>
<body>
<div id="context">
<select id="area" οnchange="choice()">
</select>
</div>
<input type=button value="显示" οnclick="show()">
<input type=button value="计算结点" οnclick="calc()">
<input type=button value="删除" οnclick="remove()">
</body>
</html>
改进版:在select中添加、修改、删除option元素
function watch_ini(){ // 初始 for(var i=0; i<arguments.length; i++){ var word = document.createElement("OPTION"); word.text = arguments[i]; watch.keywords.add(word); // watch. is form name } } function watch_add(f){ // 增加 var word = document.createElement("OPTION"); word.text = f.word.value; f.keywords.add(word); } 但上述 add() 方法只在IE下有效,为兼容FF和Opera,对上述代码进行了一下改进,改动后代码如下: function watch_ini(){ // 初始 for(var i=0; i<arguments.length; i++){ var oOption=new Option(arguments[i],arguments[i]); document.getElementById("MySelect")[i]=oOption; } } function watch_add(f){ // 增加 var oOption=new Option(f.word.value,f.word.value); f.keywords[f.keywords.length]=oOption; } 整个实例的完整代码如下: <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>javascript select options text value</title> <meta name="keywords" content="javascript select options text value add modify delete set"> <meta name="description" content="javascript select options text value add modify delete set"> <script language="javascript"> <!-- // Author: i@lxl.cn // Modify: i@cnlei.com function watch_ini(){ // 初始 for(var i=0; i<arguments.length; i++){ var oOption=new Option(arguments[i],arguments[i]); document.getElementById("MySelect")[i]=oOption; } } function watch_add(f){ // 增加 var oOption=new Option(f.word.value,f.word.value); f.keywords[f.keywords.length]=oOption; } function watch_sel(f){ // 编辑 f.word.value = f.keywords[f.keywords.selectedIndex].text; } function watch_mod(f){ // 修改 f.keywords[f.keywords.selectedIndex].text = f.word.value; } function watch_del(f){ // 删除 f.keywords.remove(f.keywords.selectedIndex); } function watch_set(f){ // 保存 var set = ""; for(var i=0; i<f.keywords.length; i++){ set += f.keywords[i].text + ";"; } confirm(set); } //--> </script> </head> <body> <form name="watch" method="post" action=""> <select id="MySelect" name="keywords" size="10" οnchange="watch_sel(this.form)"></select><br> <script language="javascript"> <!-- watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词 //--> </script> <input type="text" name="word" /><br /> <input type="button" value="增加" οnclick="watch_add(this.form);" /> <input type="button" value="修改" οnclick="watch_mod(this.form);" /> <input type="button" value="删除" οnclick="watch_del(this.form);" /> <input type="button" value="保存" οnclick="watch_set(this.form);" /> </form> </body> </html> |
Javascript-Select操作大集合 |
时间:2009-5-21 17:13:44 来源:互联网 作者:未知 |
1、向Select里添加Option function fnAddItem(text,value) { var selTarget = document.getElementById("selID"); selTarget.Add(new Option("text","value")); } 2、删除Select里的Option function fnRemoveItem() { var selTarget = document.getElementById("selID"); if(selTarget.selectedIndex > -1) {//说明选中 for(var i=0;i<selTarget.options.length;i++) { if(selTarget.options[i].selected) { selTarget.remove(i); i = i - 1;//注重这一行 } } } }3、移动Select里的Option到另一个Select中 function fnMove(fromSelectID,toSelectID) { var from = document.getElementById(fromSelectID); var to = document.getElementById(toSelectID); for(var i=0;i<from.options.length;i++) { if(from.options[i].selected) { to.appendChild(from.options[i]); i = i - 1; } } } if 里的代码也可用下面几句代码代替 var op = from.options[i]; to.options.add(new Option(op.text, op.value)); from.remove(i); 4、Select里Option的上下移动 function fnUp() { var sel = document.getElementById("selID"); for(var i=1; i < sel.length; i++) {//最上面的一个不需要移动,所以直接从i=1开始 if(sel.options[i].selected) { if(!sel.options.item(i-1).selected) {//上面的一项没选中,上下交换 var selText = sel.options[i].text; var selValue = sel.options[i].value; sel.options[i].text = sel.options[i-1].text; sel.options[i].value = sel.options[i-1].value; sel.options[i].selected = false; sel.options[i-1].text = selText; sel.options[i-1].value = selValue; sel.options[i-1].selected=true; } } } } 在进行上下两项互换时,也能够使用以下代码,但是效率很低,因为每一次的Dom操作都将导致整个页面的重新布局,所以不如直接修改元素的属性值。 var oOption = sel.options[i] var oPrevOption = sel.options[i-1] sel.insertBefore(oOption,oPrevOption);向下移动同理function fnDown() { var sel = fnGetTarget("selLeftOrRight"); for(var i=sel.length -2; i >= 0; i--) {//向下移动,最后一个不需要处理,所以直接从倒数第二个开始 if(sel.options.item(i).selected) { if(!sel.options.item(i+1).selected) {//下面的Option没选中,上下互换 var selText = sel.options.item(i).text; var selValue = sel.options.item(i).value; sel.options.item(i).text = sel.options.item(i+1).text; sel.options.item(i).value = sel.options.item(i+1).value; sel.options.item(i).selected = false; sel.options.item(i+1).text = selText; sel.options.item(i+1).value = selValue; sel.options.item(i+1).selected=true; } } } }5、Select里Option的排序这里借助Array对象的sort方法进行操作,sort方法接受一个function参数,能够在这个function里定义排序时使用的算法逻辑。 array.sort([compareFunction]) 里compareFunction接受两个参数(p1,p2),sort操作进行时,array对象会每次传两个值进去,进行比较;compareFunciton必须返回一个整数值:当返回值>0时,p1会排在p2后面;返回值<0时,p1会排在p2前面;返回值=0时,不进行操作。 例如:function fnCompare(a,b) { if (a < b) return -1; if (a > b) return 1; return 0; }var arr = new Array();//add some value into arrarr.sort(fnCompare); //这里sort的操作结果就是arr里的项按由小到大的升序排序 //假如把fnCompare里改为 //if (a < b) // return 1; //if (a > b) // return -1; //return 0; //则sort的结果是降序排列 好,下面就是对Select里Option的排序 //因为排序能够按Option的Value排序,也能够按Text排序,这里只演示按Value排序 function sortItem(){ var sel = document.getElementById("selID"); var selLength = sel.options.length; var arr = new Array(); var arrLength; //将所有Option放入array for(var i=0;i<selLength;i++) { arr[i] = sel.options[i]; } arrLength = arr.length; arr.sort(fnSortByValue);//排序 //先将原先的Option删除 while(selLength--) { sel.options[selLength] = null; } //将经过排序的Option放回Select中 for(i=0;i<arrLength;i++) { sel.add(new Option(arr[i].text,arr[i].value)); }}function fnSortByValue(a,b){ var aComp = a.value.toString(); var bComp = b.value.toString(); if (aComp < bComp) return -1; if (aComp > bComp) return 1; return 0;} 排序时还能够有更多选项,比如将value值看做Integer或是String进行排序,得到的结果是不一样的。篇幅限制,不在多做介绍。 我将这些所有的操作都写在了一个文件里,运行的效果如图 |