您的位置：首页 > Web前端 > JavaScript

html_select结合javascript的使用

2012-11-07 00:28 459 查看

这段代码包含了select的增删查改，用法很灵活，自己推敲推敲

<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="15"><!-- 加size="3"为列表框 --><option value="red">红色</option><option value="green" selected>绿色</option><option value="blue">蓝色</option></select><br><input type="button" value="遍历组合框" onclick="visitOption();"><br><input type="button" value="获取选中项" onclick="visitSelected();"><br><input type="button" value="获取所有选中项" onclick="visitAllSelected();"><br><input type="button" value="更改选中项" onclick="changeSelected();"><br><input type="button" value="添加选项" onclick="addOption();"><br><input type="button" value="删除选项" onclick="delOption();"><br><input type="button" value="删除所有选项" onclick="delAllOption();"><br></form></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航