js操作select相关方法15487.pdf

《js操作select相关方法15487.pdf》由会员分享，可在线阅读，更多相关《js操作select相关方法15487.pdf（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、js 操作 select 相关方法 1.判断 select选项中 是否存在 Value=paraValue的 Item 2.向 select选项中 加入一个 Item 3.从 select选项中 删除一个 Item 4.修改 select选项中 value=paraValue的 text为paraText 5.设置 select中 text=paraText的第一个 Item为选中 6.设置 select中 value=paraValue的 Item为选中 7.得到 select的当前选中项的 value 8.得到 select的当前选中项的 text 9.得到 select的当前选中项的 I

2、ndex 10.清空 select的项 JavaScript代码/1.判断 select选项中 是否存在 Value=paraValue的 Item function jsSelectIsExitItem(objSelect,objItemValue)var isExit=false;for(var i=0;iobjSelect.options.length;i+)if(objSelect.optionsi.value=objItemValue)isExit=true;break;return isExit;/2.向 select选项中 加入一个 Item function jsAddItem

3、ToSelect(objSelect,objItemText,objItemValue)/判断是否存在 if(jsSelectIsExitItem(objSelect,objItemValue)alert(该 Item的 Value值已经存在);else var varItem=new Option(objItemText,objItemValue);/objSelect.optionsobjSelect.options.length=varItem;objSelect.options.add(varItem);alert(成功加入);/3.从 select选项中 删除一个 Item func

4、tion jsRemoveItemFromSelect(objSelect,objItemValue)/判断是否存在 if(jsSelectIsExitItem(objSelect,objItemValue)for(var i=0;iobjSelect.options.length;i+)if(objSelect.optionsi.value=objItemValue)objSelect.options.remove(i);break;alert(成功删除);else alert(该 select中 不存在该项);/4.修改 select选项中 value=paraValue的 text为pa

5、raText function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)/判断是否存在 if(jsSelectIsExitItem(objSelect,objItemValue)for(var i=0;iobjSelect.options.length;i+)if(objSelect.optionsi.value=objItemValue)objSelect.optionsi.text=objItemText;break;alert(成功修改);else alert(该 select中 不存在该项);/5.设置 selec

6、t中 text=paraText的第一个 Item为选中 function jsSelectItemByValue(objSelect,objItemText)/判断是否存在 var isExit=false;for(var i=0;i-1)/说明选中 for(var i=0;iselTarget.options.length;i+)if(selTarget.optionsi.selected)selTarget.remove(i);i=i-1;/注意这一行 3、移动 Select里的 Option到另一个 Select中 function fnMove(fromSelectID,toSele

7、ctID)var from=document.getElementById(fromSelectID);var to=document.getElementById(toSelectID);for(var i=0;ifrom.options.length;i+)if(from.optionsi.selected)to.appendChild(from.optionsi);i=i-1;if 里的代码也可用下面几句代码代替 var op=from.optionsi;to.options.add(new Option(op.text,op.value);from.remove(i);4、Select

8、里 Option的上下移动 function fnUp()var sel=document.getElementById(selID);for(var i=1;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).t

9、ext=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参数，可以在这个

10、 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;return 0;var arr=new Array();/add some value into arr arr.sor

11、t(fnCompare);/这里 sort的操作结果就是 arr里的项按由小到大的升序排序/如果把 fnCompare里改为/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 arr

12、Length;/将所有 Option放入 array for(var i=0;iselLength;i+)arri=sel.optionsi;arrLength=arr.length;arr.sort(fnSortByValue);/排序 /先将原先的 Option删除 while(selLength-)sel.optionsselLength=null;/将经过排序的 Option放回 Select中 for(i=0;iarrLength;i+)sel.add(new Option(arri.text,arri.value);function fnSortByValue(a,b)var aComp=a.value.toString();var bComp=b.value.toString();if(aComp bComp)return 1;return 0;