zoukankan      html  css  js  c++  java
  • Javascript操作Select的方法

    用法一:

    <select name="week" onchange="location.href='login.jsp?temp='+this.value"> 
    <option value="1">星期一</option> 
    <option value="2">星期二</option> 
    <option value="3">星期三</option> 
    <option value="4">星期四</option> 
    <option value="5">星期五</option> 
    <option value="6">星期六</option> 
    <option value="7">星期日</option> 
    </select>

    用法二:

    JS动态改变select选择变更option的index值
    document.getElementById("louyuming").options[0].selected=true;

    态删除select中的所有options:
    function deleteAllOptions(sel){
    sel.options.length=0;
    }
    动态删除select中的某一项option:
    function deleteOption(sel,indx){
    sel.options.remove(indx);
    }
    动态添加select中的项option:
    function addOption(sel,text,value){
    sel.options.add(new Option(text,value));
    }
    上面在IE和FireFox都能测试成功,希望以后可以用上。
    ===========================================

    1判断select选项中 是否存在Value="paraValue"的Item
    2向select选项中 加入一个Item
    3从select选项中 删除一个Item
    4删除select中选中的项
    5修改select选项中 value="paraValue"的text为"paraText"
    6设置select中text="paraText"的第一个Item为选中
    7设置select中value="paraValue"的Item为选中
    8得到select的当前选中项的value
    9得到select的当前选中项的text
    10得到select的当前选中项的Index
    11清空select的项
    ======================================================================
    js 代码

    // 1.判断select选项中 是否存在Value="paraValue"的Item        
    function jsSelectIsExitItem(objSelect, objItemValue) {        
         var isExit = false;        
         for (var i = 0; i < objSelect.options.length; i++) {        
             if (objSelect.options[i].value == objItemValue) {        
                 isExit = true;        
                 break;        
             }        
         }        
         return isExit;        
    }         
       
    // 2.向select选项中 加入一个Item        
    function jsAddItemToSelect(objSelect, objItemText, objItemValue) {        
         //判断是否存在        
         if (jsSelectIsExitItem(objSelect, objItemValue)) {        
             alert("该Item的Value值已经存在");        
         } else {        
             var varItem = new Option(objItemText, objItemValue);      
             objSelect.options.add(varItem);     
             alert("成功加入");     
         }        
    }        
       
    // 3.从select选项中 删除一个Item        
    function jsRemoveItemFromSelect(objSelect, objItemValue) {        
         //判断是否存在        
         if (jsSelectIsExitItem(objSelect, objItemValue)) {        
             for (var i = 0; i < objSelect.options.length; i++) {        
                 if (objSelect.options[i].value == objItemValue) {        
                     objSelect.options.remove(i);        
                     break;        
                 }        
             }        
             alert("成功删除");        
         } else {        
             alert("该select中 不存在该项");        
         }        
    }    
       
       
    // 4.删除select中选中的项    
    function jsRemoveSelectedItemFromSelect(objSelect) {        
         var length = objSelect.options.length - 1;    
         for(var i = length; i >= 0; i--){    
             if(objSelect[i].selected == true){    
                 objSelect.options[i] = null;    
             }    
         }    
    }      
       
    // 5.修改select选项中 value="paraValue"的text为"paraText"        
    function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {        
         //判断是否存在        
         if (jsSelectIsExitItem(objSelect, objItemValue)) {        
             for (var i = 0; i < objSelect.options.length; i++) {        
                 if (objSelect.options[i].value == objItemValue) {        
                     objSelect.options[i].text = objItemText;        
                     break;        
                 }        
             }        
             alert("成功修改");        
         } else {        
             alert("该select中 不存在该项");        
         }        
    }        
       
    // 6.设置select中text="paraText"的第一个Item为选中        
    function jsSelectItemByValue(objSelect, objItemText) {            
         //判断是否存在        
         var isExit = false;        
         for (var i = 0; i < objSelect.options.length; i++) {        
             if (objSelect.options[i].text == objItemText) {        
                 objSelect.options[i].selected = true;        
                 isExit = true;        
                 break;        
             }        
         }              
         //Show出结果        
         if (isExit) {        
             alert("成功选中");        
         } else {        
             alert("该select中 不存在该项");        
         }        
    }        
       
    // 7.设置select中value="paraValue"的Item为选中    
    objSelect.value = objItemValue;    
           
    // 8.得到select的当前选中项的value    
    var currSelectValue = objSelect.value;    
           
    // 9.得到select的当前选中项的text    
    var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text;    
           
    // 10.得到select的当前选中项的Index    
    var currSelectIndex = objSelect.selectedIndex;    
           
    // 11.清空select的项    
    objSelect.options.length = 0; 

    整个实例的完整代码如下:
    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
    <title>javascript select options text value</title>
    <meta name="keywords" content="javascript select options text value add modify delete set">
    <meta name="description" content="javascript select options text value add modify delete set">
    <script language="javascript">
    <!--
    // Author: i@lxl.cn
    // Modify: i@cnlei.com
    function watch_ini(){ // 初始
    for(var i=0; i<arguments.length; i++){
       var oOption=new Option(arguments[i],arguments[i]);
       document.getElementById("MySelect")[i]=oOption;
    }
    }
    function watch_add(f){ // 增加
       var oOption=new Option(f.word.value,f.word.value);
       f.keywords[f.keywords.length]=oOption;
    }
    function watch_sel(f){ // 编辑
    f.word.value = f.keywords[f.keywords.selectedIndex].text;
    }
    function watch_mod(f){ // 修改
    f.keywords[f.keywords.selectedIndex].text = f.word.value;
    }
    function watch_del(f){ // 删除
    f.keywords.remove(f.keywords.selectedIndex);
    }
    function watch_set(f){ // 保存
    var set = "";
    for(var i=0; i<f.keywords.length; i++){
    set += f.keywords[i].text + ";";
    }
    confirm(set);
    }
    //-->
    </script>
    </head>
    <body>
    <form name="watch" method="post" action="">
    <select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
    <script language="javascript">
    <!--
    watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
    //-->
    </script>
    <input type="text" name="word" /><br />
    <input type="button" value="增加" onclick="watch_add(this.form);" />
    <input type="button" value="修改" onclick="watch_mod(this.form);" />
    <input type="button" value="删除" onclick="watch_del(this.form);" />
    <input type="button" value="保存" onclick="watch_set(this.form);" />
    </form>
    </body>
    </html>

  • 相关阅读:
    「UVA12293」 Box Game
    「CF803C」 Maximal GCD
    「CF525D」Arthur and Walls
    「CF442C」 Artem and Array
    LeetCode lcci 16.03 交点
    LeetCode 1305 两棵二叉搜索树中的所有元素
    LeetCode 1040 移动石子直到连续 II
    LeetCode 664 奇怪的打印机
    iOS UIPageViewController系统方法崩溃修复
    LeetCode 334 递增的三元子序列
  • 原文地址:https://www.cnblogs.com/zhangchenliang/p/1791180.html
Copyright © 2011-2022 走看看