作者:phperint | 来源:互联网 | 2023-09-17 22:28
1.判断select选项中是否存在ValueparaValue的ItemfunctionjsSelectIsExitItem(objSelect,objItemValue)
//1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect,objItemValue)
{
var isExit = false;
for(var i=0;i
{
if(objSelect.options[i].value == objItemValue)
{
isExit = true;
break;
}
}
return isExit;
}
//2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
alert("该Item的Value值已经存在");
}
else
{
var varItem = new Option(objItemText,objItemValue);
// objSelect.options[objSelect.options.length] = varItem;
objSelect.options.add(varItem);
alert("成功加入");
}
}
//3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
}
else
{
alert("该select中 不存在该项");
}
}
//4.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
}
else
{
alert("该select中 不存在该项");
}
}
//5.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect,objItemText)
{
//判断是否存在
var isExit = false;
for(var i=0;i
{
if(objSelect.options[i].text == objItemText)
{
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if(isExit)
{
alert("成功选中");
}
else
{
alert("该select中 不存在该项");
}
}
//6.设置select中value="paraValue"的Item为选中
//document.all.objSelect.value = objItemValue;
//7.得到select的当前选中项的value
//var currSelectValue = document.all.objSelect.value;
//8.得到select的当前选中项的text
//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
//9.得到select的当前选中项的Index
//var currSelectIndex = document.all.objSelect.selectedIndex;
//10.清空select的项
// document.all.objSelect.options.length = 0;
/
向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
{
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
{
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
{//最上面的一个不需要移动,所以直接从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)&#xff0c;sort操作进行时&#xff0c;array对象会每次传两个值进去&#xff0c;进行比较&#xff1b; compareFunciton必须返回一个整数值&#xff1a;当返回值>0时&#xff0c;p1会排在p2后面&#xff1b;返回值<0时&#xff0c;p1会排在p2前面&#xff1b;返回值&#61;0 时&#xff0c;不进行操作。
例如&#xff1a;
function fnCompare(a,b)
{
if (a
return -1;
if (a > b)
return 1;
return 0;
}
var arr &#61; new Array();
//add some value into arr
arr.sort(fnCompare);
//这里sort的操作结果就是arr里的项按由小到大的升序排序
//如果把fnCompare里改为
//if (a
// return 1;
//if (a > b)
// return -1;
//return 0;
//则sort的结果是降序排列
好&#xff0c;下面就是对Select里Option的排序
//因为排序可以按Option的Value排序&#xff0c;也可以按Text排序&#xff0c;这里只演示按Value排序
function sortItem()
{
var sel &#61; document.getElementById("selID");
var selLength &#61; sel.options.length;
var arr &#61; new Array();
var arrLength;
//将所有Option放入array
for(var i&#61;0;i
{
arr[i] &#61; sel.options[i];
}
arrLength &#61; arr.length;
arr.sort(fnSortByValue);//排序
//先将原先的Option删除
while(selLength--)
{
sel.options[selLength] &#61; null;
}
//将经过排序的Option放回Select中
for(i&#61;0;i
{
sel.add(new Option(arr[i].text,arr[i].value));
}
}
function fnSortByValue(a,b)
{
var aComp &#61; a.value.toString();
var bComp &#61; b.value.toString();
if (aComp
return -1;
if (aComp > bComp)
return 1;
return 0;
}
&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;
/********************************
* table methods
*********************************/
bes.table&#61;{
//find whether there be one selected checkbox
checkHasSelectedBoxes:function(ele, name){
var table &#61; bes.table.getParentTable(ele);
if(!table)return false;
var chks &#61; bes.table.getFirstCheckboxes(table, name);
if(!chks)return false;
if(chks.length <1)return false;
if(chks.length &#61;&#61; 1 && chks[0] &#61;&#61; ele)return false;
for(var i&#61;0;i
if(!chks[i].disabled)return true;
}
return false;
},
//get all selected checkboxs
getSelectedCheckboxs:function(table, name){
var chks &#61; this.getFirstCheckboxes(table, name);
var arr &#61; new Array();
for(var i &#61; 0; i
if(!chks[i].checked)continue;
arr[arr.length] &#61; chks[i];
}
return arr;
},
//get all checkboxes(selected or not)
getCheckboxSelects:function(table, name){
var chks &#61; this.getFirstCheckboxes(table, name);
return chks.slice(0, chks.length - 1);
},
//get checkbox in the first cell of head rows
getCheckboxAllSelect:function(table, name){
var chks &#61; this.getFirstCheckboxes(table, name);
return chks[chks.length - 1];
},
//get table checkbox selection status, with has checked and all checked status
getCheckboxStatus:function(table, name, checkbox){
var chks &#61; this.getFirstCheckboxes(table, name);
var allCheck &#61; chks[chks.length-1];
allCheck.checked&#61;checkbox?checkbox.checked:true;
var hasChecked &#61; false;
for(var i &#61; chks.length - 2; i >&#61;0; i --){
if(chks[i].disabled)continue;
if(chks[i].checked){
hasChecked&#61;true;
}else{
allCheck.checked &#61; false;
}
}
return {
allChecked:allCheck.checked,
hasChecked:hasChecked
};
},
//
selectCheckboxAll:function(checkbox, name){
var table &#61; this.getParentTable(checkbox);
var chks &#61; this.getFirstCheckboxes(table, name);
for(var i &#61; chks.length - 2; i >&#61;0; i --){
if(chks[i].disabled)continue;
this.selectCheckbox(chks[i], checkbox.checked);
}
},
selectCheckbox:function(chk, checked){
var c &#61; checked;
if(null &#61;&#61; checked)c &#61; chk.checked;
var row &#61; this.getParentNode(chk, "TR");
if(c){
bes.addClass(row, "SelectedRow");
}else{
bes.delClass(row, "SelectedRow");
}
row._selected_ &#61; c;
if(null !&#61; checked)chk.checked &#61; checked;
},
onSelectCheckbox:function(checkbox){
this.selectCheckbox(checkbox);
var table &#61; this.getParentTable(checkbox);
return this.getCheckboxStatus(table, checkbox.name, checkbox);
},
getParentNode:function(node, tag){
do{
if(node.tagName)if(node.tagName.toUpperCase()&#61;&#61;tag){
return node;
}
node &#61; node.parentNode;
}while(node);
return false;
},
getParentTable:function(node){
return bes.table.getParentNode(node, "TABLE");
},
getFirstCheckboxes:function(table, name){
var rs &#61; table.rows;
var chks &#61; new Array();
var chkAll &#61; false;
for(var i&#61;0; i
var cs &#61; rs[i].cells;
for(var j&#61;0; j <2 && j
var ns &#61; cs[j].childNodes;
for(var k&#61;0; k
var n &#61; ns[k];
if(n.type!&#61;"checkbox")continue;
if(n.name!&#61;name){
if(!chkAll && i &#61;&#61; 0 && (!n.name || n.name&#61;&#61;"")){
chkAll &#61; n;
}
continue;
}
chks.push(n);
ns&#61;false;
break;
}
if(!ns)break;
}
}
chks.push(chkAll);
return chks;
},
getSorter:function(table, thbase){
if(table.data)return table.data;
table.$ &#61; table.getElementsByTagName;
function parseInner(inner){
inner &#61; inner &#43; "";
var idx &#61; inner.indexOf("", "").replaceAll(" ", " ").trim()];
}
function sortChar(asc){
return " " &#43; String.fromCharCode(9655 - 5 * asc) &#43; ""
}
function getTableHeaders(table, thbase){
var headers &#61; table.$("THEAD")[0].getElementsByTagName("TR")[0].getElementsByTagName("TH");
for(var i &#61; 0; i
var h &#61; headers[i];
var d &#61; parseInner(h.innerHTML);
if(d.length <2)continue;
d &#61; {
label:d[0],
type:d[1],
idx:i
};
d.sort&#61;0;//0 --null/1 --asc/-1 --desc
h.d &#61; d;
h.d.table &#61; table;
h.innerHTML&#61;d.label;
h.οnclick&#61;function(){
if(!this.d)return;
this.d.table.data.sort(this.d.idx);
}
}
for(var i &#61; 0; i
var h &#61; headers[i];
if(!h.d)continue;
if(h.d.type.charAt(0) &#61;&#61; "&"){
var v &#61; parseInt(h.d.type.substring(1)) &#43; thbase;
v &#61; headers[v];
if(v.d){
h.d.as &#61; v;
}else{
h.d &#61; false;
}
}
}
return headers;
}
function getTableRows(table){
table.data.tbody &#61; table.$("TBODY")[0];
var rows &#61; table.data.tbody.getElementsByTagName("TR");
table.data.rows &#61; [];
var headers &#61; table.data.headers;
for(var i &#61; 0; i
var row &#61; rows[i];
table.data.rows.push(row);
row.cs &#61; row.getElementsByTagName("TD");
for(var j&#61;0; j
var h &#61; headers[j];
if(!h || !h.d || h.d.as)continue;
var c &#61; row.cs[j];
c.v &#61; parseInner(c.innerHTML);
if(c.v.length <2){
c.v &#61; c.v[0];
}else{
c.v &#61; c.v[1];
}
if(h.d.type &#61;&#61; "num"){
try{
c.v &#61; parseInt(c.v);
}catch(e){
c.v &#61; null;
}
if(isNaN(c.v))c.v&#61;null;
}
}
}
}
table.data &#61; {
headers:getTableHeaders(table, thbase?thbase:0)
};
getTableRows(table);
table.data.sorter &#61; function(r1, r2){
var ss &#61; table.data.sorters;
for(var i &#61; 0; i
var d &#61; ss[i].d;
var v1 &#61; r1.cs[d.idx].v;
var v2 &#61; r2.cs[d.idx].v;
if(v1 &#61;&#61; v2)continue;
if(!v1)return -1 * d.sort;
if(!v2)return 1 * d.sort;
return (v1 > v2?1:-1) * d.sort;
}
return 0;
};
table.data.sorters &#61; [];
table.data.rowsort &#61; function(){//[h...]
var hs &#61; table.data.sorters;
for(var i &#61; hs.length - 1; i >&#61; 0; i --){
var h &#61; hs[i];
if(i&#61;&#61;0){
h.innerHTML &#61; h.d.label &#43; sortChar(h.d.sort);
}else{
h.innerHTML &#61; h.d.label;
}
}
this.rows.sort(this.sorter);
};
table.data.initSorters &#61; function(opts){
var hs &#61; [].concat(this.sorters);
hs.reverse();
for(var i&#61;opts.length - 1; i >&#61;0; i --){
var opt &#61; opts[i];
if(!opt && opt !&#61; 0)continue
if(!opt.idx){
opt&#61;{
idx:opt
};
}
if(!opt.sort){
opt.sort&#61;"r";
}
var h &#61; this.headers[opt.idx];
if(!h.d)continue;
if(h.d.as)h&#61;h.d.as;
for(var j &#61; 0; j
if(hs[j] &#61;&#61; h)hs[j] &#61; false;
}
switch(opt.sort){
case "a": h.d.sort&#61;1; break;
case "d": h.d.sort&#61;-1; break;
default://r
if(h.d.sort &#61;&#61; 0){
h.d.sort&#61;1;
}else {
h.d.sort&#61;0 - h.d.sort;
}
}
hs.push(h);
}
this.sorters &#61; [];
for(var i &#61; hs.length - 1; i >&#61; 0; i --){
var h &#61; hs[i];
if(!h)continue;
this.sorters.push(h);
}
};
table.data.sort &#61; function(){
this.initSorters(arguments);
this.rowsort();
var inputs &#61; table.$("INPUT");
var selected &#61; [];
for(var i &#61; 0; i
var ipt &#61; inputs[i];
if(ipt.checked)selected.push(ipt);
}
//rebuild table
for(var i &#61; 0; i
var r &#61; this.rows[i];
this.tbody.removeChild(r);
this.tbody.appendChild(r);
bes.delClass(r, "Row" &#43; (i % 2 - 1));
bes.addClass(r, "Row" &#43; (i % 2));
}
for(var i &#61; 0; i
selected[i].checked &#61; true;
}
};
return table.data;
},
initSorter:function(ele, thbase, thidx){
var t &#61;bes.table.getParentTable(ele);
bes.table.getSorter(t, thbase);
t.data.sort(thbase &#43; thidx);
},
currow:null,
overRow:function(row){
if(this.currow)this.outRow(this.currow);
this.currow &#61; row;
bes.addClass(row, "CurrentRow");
},
outRow:function(row){
bes.delClass(row, "CurrentRow");
this.currow &#61; null;
}
}
&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;
/********************************
* remove rows of properties table
*********************************/
bes.removeRow&#61;function(table,name){
try{
for(var i&#61;table.rows.length - 1; i > 0 ; i --){
var row &#61; table.rows[i];
var chx &#61; row.cells[0].childNodes[0];
if(null !&#61; chx && chx.checked){
table.deleteRow(i);
}else if(row._selected_){
table.deleteRow(i);
}
}
var status&#61;bes.table.getCheckboxAllSelect(table,name);
bes.table.selectCheckbox(status, false);
}catch(e){}
bes.setRowClass(table);
}
/********************************
* remove all rows of Properties table
*********************************/
bes.removeAllRows&#61;function(table,name){
try{
for(var i&#61;table.rows.length - 1; i > 0 ; i --){
table.deleteRow(i);
}
var status&#61;bes.table.getCheckboxAllSelect(table,name);
bes.table.selectCheckbox(status, false);
}catch(e){}
}