JS-SelectBox操作

设置选项与结果

        (function(){
            var btn1 = document.getElementById("btnFirst"),
                btn2 = document.getElementById("btnSecond"),
                btn3 = document.getElementById("btnSelected"),
                selectbox = document.getElementById("selLocation");
            EventUtil.addHandler(btn1, "click", function(event){
                selectbox.selectedIndex = 0;
// 也可以通过 html 的元素索引
                // selectbox.options[0].selected = true;
            });
            EventUtil.addHandler(btn2, "click", function(event){
                selectbox.selectedIndex = 1;
            });
            EventUtil.addHandler(btn3, "click", function(event){
                var selIndex = selectbox.selectedIndex;
                var selOption = selectbox.options[selIndex];
                alert("Selected index: " + selectbox.selectedIndex + "\nSelected text: " + selOption.text + "\nSelected value: " + selOption.value);
            });
        })();

多选时，获取所有已选项

 function getSelectedOptions(selectbox){
                var result = new Array();
                var option = null;
                for (var i=0, len=selectbox.options.length; i < len; i++){
                    option = selectbox.options[i];
                    if (option.selected){
                        result.push(option);
                    }
                }
                return result;
            }

使用DOM方式插入 option

                var newOption = document.createElement("option");
                newOption.appendChild(document.createTextNode(textTextbox.value));
                newOption.setAttribute("value", valueTextbox.value);
                selectbox.appendChild(newOption);

使用 Option 对象插入

                var newOption = new Option(textTextbox.value, valueTextbox.value);
                selectbox.appendChild(newOption);
                //selectbox.add(newOption, undefined);

删除option - DOM方式

selectbox.removeChild(selectbox.options[0]);

删除option - remove(option_index)

selectbox.remove(0);

删除option - null 赋值方式

selectbox.options[0] = null;

左右两个选择框的互动实现

            (function(){
                var btn = document.getElementById("btnMove");
                EventUtil.addHandler(btn, "click", function(event){
                    var selectbox1 = document.getElementById("selLocations1"),
                        selectbox2 = document.getElementById("selLocations2"),
                        textbox = document.getElementById("txtIndex");
                    selectbox2.appendChild(selectbox1.options[parseInt(textbox.value, 10)]);
                });
            })();

Option 元素的上下移动实现

    (function(){
        var btnUp = document.getElementById("btnUp");
        var btnDown = document.getElementById("btnDown");
        EventUtil.addHandler(btnUp, "click", function(event){
            var selectbox = document.getElementById("selLocations");
            var textbox = document.getElementById("txtIndex");
            var optionToMove = selectbox.options[parseInt(textbox.value, 10)];
            if (optionToMove.index > 0){
                selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);
            }
        });
        EventUtil.addHandler(btnDown, "click", function(event){
            var selectbox = document.getElementById("selLocations");
            var textbox = document.getElementById("txtIndex");
            var optionToMove = selectbox.options[parseInt(textbox.value, 10)];
            selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index+2]);
        });
    })();