zoukankan      html  css  js  c++  java
  • JS操作select相关方法

    JS操作select相关方法:新增 修改 删除 选中 清空 判断存在 等

    1.判断select选项中 是否存在Value="paraValue"的Item
    2.向select选项中 加入一个Item
    3.从select选项中 删除一个Item
    4.修改select选项中 value="paraValue"的text为"paraText"
    5.设置select中text="paraText"的第一个Item为选中
    6.设置select中value="paraValue"的Item为选中
    7.得到select的当前选中项的value
    8.得到select的当前选中项的text
    9.得到select的当前选中项的Index
    10.清空select的项
    -------------------------------------------
    //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[objSelect.options.length] = varItem;
             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选项中 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中 不存在该项");
         }    
    }
            
    //5.设置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中 不存在该项");
         }    
    }

    //6.设置select中value="paraValue"的Item为选中
    //document.all.objSelect.value = objItemValue;

    //7.得到select的当前选中项的value
    //var currSelectValue = document.all.objSelect.value;

    //8.得到select的当前选中项的text
    //var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

    //9.得到select的当前选中项的Index
    //var currSelectIndex = document.all.objSelect.selectedIndex;

    //10.清空select的项
    // document.all.objSelect.options.length = 0;

  • 相关阅读:
    微软与谷歌盈利模式对比分析
    unity开源移动库iTween使用完整Demo
    开发过程遇到的问题和解决方法(备忘)
    微信开发基础教程
    WorkFlow基础实战
    操作系统学习笔记
    编译原理学习
    微信生态圈盈利模式分析
    数据与计算机通信学习笔记
    利用Spring.Net技术打造可切换的分布式缓存读写类
  • 原文地址:https://www.cnblogs.com/newwind521/p/693037.html
Copyright © 2011-2022 走看看