select、option要素のDOM操作:

2815 ワード


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;
}