整理发布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; i < oSelect.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; i < selOptions.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; i < oSelectFrom.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; i < oSelect.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; i < selLength; i++) {
        arr[i] = oSelect.options[i];
    }
    arrLength = arr.length;
    arr.sort(sortNumber); //排序
    //先将原先的Option删除
    while (selLength--) {
        oSelect.options[selLength] = null;
    }
    //将经过排序的Option放回Select中
    for (i = 0; i < arrLength; 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 (theIndex < 0) theIndex = 0;
        else if (theIndex > oSelect.options.length) theIndex = oSelect.options.length;
    }
    return theIndex;
}

复制代码

最后要说明的是级联select的操作要涉及很多后台代码，比如注册脚本（通常交给后台一个.ashx文件来做），分类值的初始化（页面取值和赋值以及js实现的联动初始化函数）。这里涉及到具体的项目需要，思路大同小异，就不贴笔者在项目中实现的联动效果代码了。 需要注意的是如果你给DropdownList控件注册了js事件，页面的EnableEventValidate必须设置为false。

作者：Jeff Wong 
出处：http://jeffwongishandsome.cnblogs.com/ 
本文版权归作者和博客园共有，欢迎围观转载。转载时请您务必在文章明显位置给出原文链接，谢谢您的合作。