InnerHTML and Select option in IE

php 2013.04.27 13:09

InnerHTML and Select option in IE 3가지 방법

 

1. jQuery 를 사용 : 제일 심플 함

 

document.getElementById('id').innerHTML = '<option>1</option>';
-> $('#id').html('<option>1</option>');
 
2. MS 제안 방법
 
Div 개체를 사용하여 SELECT 요소의 래핑하고 Div 개체에 대해 innerHTML 속성을 설정
 
3. select_innerHTML 함수 정의하여 사용
var inner = "<option value='1'>Now</option> <option value='2'>work</option>"; 
select_innerHTML(document.getElementById("my_select"),inner);
->

function select_innerHTML(objeto,innerHTML){
    objeto.innerHTML = "";
    var selTemp = document.createElement("micoxselect");
    var opt;
    selTemp.id="micoxselect1";
    document.body.appendChild(selTemp);
    selTemp = document.getElementById("micoxselect1");
    selTemp.style.display="none";
    if(innerHTML.toLowerCase().indexOf("<option")<0){ 
        innerHTML = "<option>" + innerHTML + "</option>";
    }
    innerHTML = innerHTML.toLowerCase().replace(/<option/g,"<span").replace(/<\/option/g,"</span");
    selTemp.innerHTML = innerHTML;
         
    for(var i=0;i<selTemp.childNodes.length;i++){
      var spantemp = selTemp.childNodes[i];
 
      if(spantemp.tagName){    
           opt = document.createElement("OPTION");
   
           if(document.all){ //IE
            objeto.add(opt);
           }else{
            objeto.appendChild(opt);
           }       
   
       //getting attributes
       for(var j=0; j<spantemp.attributes.length ; j++){
        var attrName = spantemp.attributes[j].nodeName;
        var attrVal = spantemp.attributes[j].nodeValue;
        if(attrVal){
         try{
          opt.setAttribute(attrName,attrVal);
          opt.setAttributeNode(spantemp.attributes[j].cloneNode(true));
         }catch(e){}
        }
       }
       //getting styles
       if(spantemp.style){
        for(var y in spantemp.style){
         try{opt.style[y] = spantemp.style[y];}catch(e){};
        }
       }
       //value and text
       opt.value = spantemp.getAttribute("value");
       opt.text = spantemp.innerHTML;
       //IE
       opt.selected = spantemp.getAttribute('selected');
       opt.className = spantemp.className;
      }
     
    }   
     document.body.removeChild(selTemp);
     selTemp = null;
}
Trackback 0 : Comment 0