select,option 元素的DOM操作:

select 元素常用属性(方法):
    add(newOption, relOption) — 添加新的option元素在relOption元素之前。
    multiple — Boolean值。默认值为false,select 元素默认单选。
    remove(index) —  删除索引为index的option元素。
    selectedIndex — 选中的option元素的索引。如果是多选,则返回第一个option的索引。没有选中的元素返回-1.
    options — HTMLCollection 对象,包含select元素下的 option 元素。
    type —— 取值为 "select-one" 或 "select-multiple",表示它是单选或多选。

注意:关于selec元素的value值:
     a)如果没有元素选中,单选情况下,取第一个option的值,多选情况下值为空字符串。
     b)如果有多个元素选中,只返回第一个option的值。
     c)如果选中的option没有设置value,那么在IE6/7/8中,值为空字符串,在IE9+以及其他浏览器中,option的显示文本,将作为值返回。

// 示例
    <select name="location" id="selLocation" multiple>
        <option value="Sunnyvale, CA">Sunnyvale</option>
        <option value="Los Angeles, CA">Los Angeles</option>
        <option value="Mountain View, CA">Mountain View</option> // value: "Mountain View, CA"
        <option value="">China</option> // value: ""(空字符串)
        <option>Australia</option>  // value:"Australia"
    </select>

option元素的常用属性(方法):
    index — option在 select元素的options对象中的索引
    selected —  Boolean ,true表示被选中
    text — 显示的文本
    value — 值

//添加option元素:
    var newOption = new Option("Option text", "Option value");

    //这个调用在IE6/7/8下,无法正常运行。
    // selectbox.appendChild(newOption); 

    /* 改用以下方式:第二个参数(relOption)表示option添加在relOption之前,对于IE6/7/8是无效的,为了兼容,我们设置为undefined.
     其结果是 该option默认添加到最后。如果我们需要控制option的位置,可以利用 insertBefore() 方法。
    */
    selectbox.add(newOption, undefined); 

// 删除 option 元素:
    selectbox.removeChild(selectbox.options[0]);
OR:
    selectbox.remove(0); //remove first option

//修改option的位置

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);//调换了前2个option的位置。



//获取select元素选中的option值
function getSelectValue(selectbox){
    var result = new Array();
    var option = null;
    for (var i=0, len=selectbox.options.length; i < len; i++){
        optValue = null;
        option = selectbox.options[i];
        if (option.hasAttribute){
            optValue = (option.hasAttribute("value") ? option.value : option.text);
        } else {
            optValue = (option.attributes["value"].specified ? option.value : option.text);
        }
        result.push(optValue);
    }
    return result;
}

相关推荐