listBOX html实现

最新推荐文章于 2021-06-18 16:23:07 发布

fightback

最新推荐文章于 2021-06-18 16:23:07 发布

阅读量1.5k

点赞数

文章标签： html button function input javascript

转自：地址忘记了

<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">
                     <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>

fightback

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
listBOX html实现

转自：地址忘记了listbox and combobox function visitOption(){ var oSelCode=document.getElementById("selColor"); var i; for(i=0;i alert(oSelCode.options[i].firstChild
复制链接

扫一扫