快捷搜索:

整理发布html的select控件实用js操作

上周在公司的erp项目中,将原本的商品分类(大年夜类,一级分类和小类)改造成select控件的三级联动的效果(实际上笔者应用的是三个DropdownList控件)。用到了select控件的插入和移除option的操作措施。根据笔者的履历,在实际项目中,select控件是常常要用到的(当然包括DropdownList控件)。下面就收拾宣布一下select的一些常见js操作措施。贴代码为主:

/*select控件常见操作*/

//1、向select里添加option

function selectOptionAdd(oSelect, sName, sValue) {

var oOption = document.createElement("option");

oOption.appendChild(document.createTextNode(sName));

if (arguments.length == 3) {

oOption.setAttribute("value", sValue);

}

oSelect.appendChild(oOption);

}

//在select控件的指定位置插入一项

function addOptionAtPosition(oSelect, optionValue, optionText, position) {

if (document.all) //IE

{

var option = document.createElement("option");

option.value = optionValue;

option.innerText = optionText;

oSelect.insertBefore(option, oSelect.options[position]);

}

else { //其他浏览器

oSelect.insertBefore(new Option(optionValue, optionText), oSelect.options[position]);

}

}

//2、删除select里的option

function selectOptionRemoveItem(oSelect) {

if (oSelect.selectedIndex > -1) {//阐明选中

for (var i = 0; ioSelect.options.length; i++) {

if (oSelect.options[i].selected) {

oSelect.remove(i);

i = i - 1; //留意这一行 奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫**

}

}

}

}

//select移除一项

function removeOneOption(oSelect, optionValue) {

var selOptions = oSelect.options;

for (var i = 0; iselOptions.length; i++) {

if (selOptions[i].value == optionValue) {

oSelect.remove(i);

break;

}

}

}

// 清空select所有项目

function removeSelItems(oSelect) {

//删除select中所有项

oSelect.options.length = 0;

}

//3、移动select里的option到另一个select中

function selectsMoveOption(oSelectFrom, oSelectTo) {

for (var i = 0; ioSelectFrom.options.length; i++) {

if (oSelectFrom.options[i].selected) {

/*if 里的代码也可用下面几句代码代替 var op = oSelectFrom.options[i];oSelectTo.options.add(new Option(op.text, op.value));oSelectFrom.remove(i); */

oSelectTo.appendChild(oSelectFrom.options[i]);

i = i - 1;

}

}

}

//4、select里option的高低移动

function selectMoveUp(oSelect) {

for (var i = 1; ioSelect.length; i++) {//最上面的一个不必要移动,以是直接从i=1开始

if (oSelect.options[i].selected) {

/*在进行高低两项交换时,也可以应用以下代码,然则效率很低,由于每一次的Dom操作都将导致全部页面的从新结构,以是不如直接改动元素的属性值。var oOption = oSelect.options[i];var oPrevOption = oSelect.options[i-1];oSelect.insertBefore(oOption,oPrevOption);向下移动同理 */

if (!oSelect.options.item(i - 1).selected) {//上面的一项没选中,高低互换

var selText = oSelect.options[i].text;

var selValue = oSelect.options[i].value;

oSelect.options[i].text = oSelect.options[i - 1].text;

oSelect.options[i].value = oSelect.options[i - 1].value;

oSelect.options[i].selected = false;

oSelect.options[i - 1].text = selText;

oSelect.options[i - 1].value = selValue;

oSelect.options[i - 1].selected = true;

}

}

}

}

function selectMoveDown(oSelect) {

for (var i = oSelect.length - 2; i >= 0; i--) {//向下移动,着末一个不必要处置惩罚,以是直接从倒数第二个开始

if (oSelect.options.item(i).selected) {

if (!oSelect.options.item(i + 1).selected) {//下面的Option没选中,高低交换

var selText = oSelect.options.item(i).text;

var selValue = oSelect.options.item(i).value;

oSelect.options.item(i).text = oSelect.options.item(i + 1).text;

oSelect.options.item(i).value = oSelect.options.item(i + 1).value;

oSelect.options.item(i).selected = false;

oSelect.options.item(i + 1).text = selText;

oSelect.options.item(i + 1).value = selValue;

oSelect.options.item(i + 1).selected = true;

}

}

}

}

//5、select里option的排序

/*这里借助Array工具的sort措施进行操作,sort措施吸收一个function参数,可以在这个function里定义排序时应用的算法逻辑。*/

//由于排序可以按Option的Value排序,也可以按Text排序,这里按Value排序

function sortItems(oSelect) {

var selLength = oSelect.options.length;

var arr = new Array();

var arrLength;

//将所有Option放入array

for (var i = 0; iselLength; i++) {

arr[i] = oSelect.options[i];

}

arrLength = arr.length;

arr.sort(sortNumber); //排序

//先将本来的Option删除

while (selLength--) {

oSelect.options[selLength] = null;

}

//将颠末排序的Option放回Select中

for (i = 0; iarrLength; i++) {

selectOptionAdd(oSelect, arr[i].text, arr[i].value);

//oSelect.add(new Option(arr[i].text,arr[i].value));

}

}

//6.鼠标悬浮时获取select的options的index

function getOptionIndex(oSelect) {

var theIndex = -1;

if (oSelect.options.length > 0) {

theIndex = Math.floor((event.offsetY + 2) / (oSelect.offsetHeight / oSelect.options.length));

if (theIndex0) theIndex = 0;

else if (theIndex > oSelect.options.length) theIndex = oSelect.options.length;

}

return theIndex;

}

您可能还会对下面的文章感兴趣: