天天看點

listBOX html實作

轉自:位址忘記了

<HTML>

<HEAD>

<TITLE>listbox and combobox</TITLE>

</HEAD>

<script language="javascript">

   function visitOption(){

     var oSelCode=document.getElementById("selColor");

    var i;

    for(i=0;i<oSelCode.options.length;i++){

       alert(oSelCode.options[i].firstChild.nodeValue);//重點方法

       alert(oSelCode.options[i].getAttribute("value"));//重點方法

       //alert(oSelCode.options[i].index);

       //alert(oSelCode.options[i].text);

       //alert(oSelCode.options[i].value);

    }

   }

   function visitSelected(){

     var oSelCode=document.getElementById("selColor");

    alert(oSelCode.selectedIndex);

    alert(oSelCode.options[oSelCode.selectedIndex].index);

     alert(oSelCode.options[oSelCode.selectedIndex].text);

    alert(oSelCode.options[oSelCode.selectedIndex].value);

   }

   function visitAllSelected(){

     var oSelCode=document.getElementById("selColor");

    var i;

    for(i=0;i<oSelCode.options.length;i++){

       //alert(oSelCode.selectedIndex)

       if(oSelCode.options[i].selected){

         alert(oSelCode.options[i].index);

        alert(oSelCode.options[i].text);

        alert(oSelCode.options[i].value);

       }

    }

   }

   function changeSelected(){

     var oSelCode=document.getElementById("selColor");

    oSelCode.selectedIndex=oSelCode.options.length-1;//移動到最後一項

   }

   function addOption(){

     var oSelCode=document.getElementById("selColor");

    var oOption=document.createElement("option");

    oOption.setAttribute("value","yellow");

    var oText=document.createTextNode("黃色");

     oOption.appendChild(oText);

    oSelCode.appendChild(oOption);

     //oOption.document.createElement("黃色");//錯誤

    //oOption.document.createTextNode("yellow");//錯誤

    //oSelCode.appendChild(oOption);

   }

   function delOption(){

     var oSelCode=document.getElementById("selColor");

    var oOption=oSelCode.options[oSelCode.selectedIndex];

    oSelCode.removeChild(oOption);

   }

   function delAllOption(){

     var oSelCode=document.getElementById("selColor");

    var i;

    for(i=oSelCode.options.length-1;i>=0;i--){

       var oOption=oSelCode.options[i];

       oSelCode.removeChild(oOption);

    }

   }

</script>

<BODY>

<form>

   選擇喜歡的顔色:<select id="selColor" name="selColor" multiple="true"><!-- 加size="3"為清單框 -->

                     <option value="red">紅色</option>

                     <option value="green" selected>綠色</option>

                     <option value="blue">藍色</option>

                   </select><br>

   <input type="button" value="周遊組合框" οnclick="visitOption();"><br>

   <input type="button" value="擷取選中項" οnclick="visitSelected();"><br>

   <input type="button" value="擷取所有選中項" οnclick="visitAllSelected();"><br>

   <input type="button" value="更改選中項" οnclick="changeSelected();"><br>

   <input type="button" value="添加選項" οnclick="addOption();"><br>

   <input type="button" value="删除選項" οnclick="delOption();"><br>

   <input type="button" value="删除所有選項" οnclick="delAllOption();"><br>

</form>

</BODY>

</HTML>

繼續閱讀