zoukankan      html  css  js  c++  java

  • js 清除select里的值,js控制select增删改,选中,清空, 判断控件是否存在 .(转)

    清空select的项

    Html 代码
    [javascript] view plaincopyprint?
    1. 1. // document.all.objSelect.options.length = 0;    
    如果留下第一行的话就是
    Html 代码
    [java] view plaincopyprint?
    1. document.all.objSelect.options.length = 1;    
    判断select选项中 是否存在Value="paraValue"的Item
    Js 代码
    [javascript] view plaincopyprint?
    1.     function jsSelectIsExitItem(objSelect,objItemValue)    
    2.    {    
    3.        var isExit = false;    
    4.      for(var i=0;i<objSelect.options.length;i++)    
    5.   {    
    6.        if(objSelect.options[i].value == objItemValue)    
    7.     {    
    8.           isExit = true;    
    9.              break;    
    10.         }    
    11.    }         
    12.    return isExit;    
    13. }   
    向select选项中 加入一个Item
    Js 代码
    [javascript] view plaincopyprint?
    1.  1. function jsAddItemToSelect(objSelect,objItemText,objItemValue)    
    2.  2. {    
    3.  3.      // 判断是否存在     
    4.  4.      if(jsSelectIsExitItem(objSelect,objItemValue))    
    5.  5.      {    
    6.  6.          alert(" 该Item的Value值已经存在");    
    7.  7.      }    
    8.  8.      else    
    9.  9.      {    
    10. 10.          var varItem = new Option(objItemText,objItemValue);    
    11. 11. //       objSelect.options[objSelect.options.length] = varItem;     
    12. 12.          objSelect.options.add(varItem);    
    13. 13.          alert(" 成功加入");    
    14. 14.      }       
    15. 15. }    
    从select选项中 删除一个Item
    Js 代码
    [javascript] view plaincopyprint?
    1.  1. function jsRemoveItemFromSelect(objSelect,objItemValue)    
    2.  2. {    
    3.  3.      // 判断是否存在     
    4.  4.      if(jsSelectIsExitItem(objSelect,objItemValue))    
    5.  5.      {    
    6.  6.          for(var i=0;i<objSelect.options.length;i++)    
    7.  7.          {    
    8.  8.              if(objSelect.options[i].value == objItemValue)    
    9.  9.              {    
    10. 10.                  objSelect.options.remove(i);    
    11. 11.                  break;    
    12. 12.              }    
    13. 13.          }           
    14. 14.          alert(" 成功删除");               
    15. 15.      }    
    16. 16.      else    
    17. 17.      {    
    18. 18.          alert(" 该select中 不存在该项");    
    19. 19.      }       
    20. 20. }    
    修改select选项中 value="paraValue"的text为"paraText"
    Js代码
    [javascript] view plaincopyprint?
    1.  1. function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)    
    2.  2. {    
    3.  3.      // 判断是否存在     
    4.  4.      if(jsSelectIsExitItem(objSelect,objItemValue))    
    5.  5.      {    
    6.  6.          for(var i=0;i<objSelect.options.length;i++)    
    7.  7.          {    
    8.  8.              if(objSelect.options[i].value == objItemValue)    
    9.  9.              {    
    10. 10.                  objSelect.options[i].text = objItemText;    
    11. 11.                  break;    
    12. 12.              }    
    13. 13.          }    alert(" 成功修改");               
    14. 14.      }    
    15. 15.      else    
    16. 16.      {    
    17. 17.          alert(" 该select中 不存在该项");    
    18. 18.      }       
    19. 19. }    
    设置select中text="paraText"的第一个Item为选中
    Js 代码
    [javascript] view plaincopyprint?
    1.  1. function jsSelectItemByValue(objSelect,objItemText)    
    2.  2. {       
    3.  3.      // 判断是否存在     
    4.  4.      var isExit = false;    
    5.  5.      for(var i=0;i<objSelect.options.length;i++)    
    6.  6.      {    
    7.  7.          if(objSelect.options[i].text == objItemText)    
    8.  8.          {    
    9.  9.              objSelect.options[i].selected = true;    
    10. 10.              isExit = true;    
    11. 11.              break;    
    12. 12.          }    
    13. 13.      }         
    14. 14.      //Show 出结果     
    15. 15.      if(isExit)    
    16. 16.      {    
    17. 17.          alert(" 成功选中");               
    18. 18.      }    
    19. 19.      else    
    20. 20.      {    
    21. 21.          alert(" 该select中 不存在该项");    
    22. 22.      }       
    23. 23. }    
    设置select中value="paraValue"的Item为选中
    Js 代码
    1. //document.all.objSelect.value = objItemValue;    
    //document.all.objSelect.value = objItemValue;


    得到select的当前选中项的value
    Js 代码
    1. //var currSelectValue = document.all.objSelect.value;    
    //var currSelectValue = document.all.objSelect.value;


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


    得到select的当前选中项的Index
    Js 代码
    1. //var currSelectIndex = document.all.objSelect.selectedIndex;  
    完整例子

    Html 代码  
    2. < html >   
    3. < head >   
    4. < title > js 控制select增删改,选中,清空, 判断控件是否存在 </ title >   
    5. < meta   name = "keywords"   content = "javascript select options text value add modify delete set" >   
    6. < meta   name = "description"   content = "javascript select options text value add modify delete set" >   
    7. < script   language = "javascript" >   
    8. <!--  
    9. function watch_ini() { // 初始  
    10. for(var i = 0 ; i < arguments.length ; i++){  
    11.    var oOption = new  Option(arguments[i],arguments[i]);  
    12.    document.getElementById("MySelect")[i]=oOption;  
    13. }  
    14. }  
    15. function watch_add(f) { // 增加  
    16.    var oOption = new  Option(f.word.value,f.word.value);  
    17.    f.keywords[f.keywords.length]=oOption;  
    18. }  
    19. function watch_sel(f) { // 编辑  
    20. f f.word.value  = f.keywords[f.keywords.selectedIndex].text;  
    21. }  
    22. function watch_mod(f) { // 修改  
    23. f.keywords[f.keywords.selectedIndex].text  =  f .word.value;  
    24. }  
    25. function watch_del(f) { // 删除  
    26. f.keywords.remove(f.keywords.selectedIndex);  
    27. }  
    28. function watch_set(f) { // 保存  
    29. var set  =  "" ;  
    30. for(var i = 0 ; i < f.keywords.length ; i++){  
    31. set += f.keywords[i].text + ";";  
    32. }  
    33. confirm(set);  
    34. }  
    35. //-->   
    36. </ script >   
    37. </ head >   
    38. < body >   
    39. < form   name = "watch"   method = "post"   action = "" >   
    40. < select   id = "MySelect"   name = "keywords"   size = "10"   onchange = "watch_sel(this.form)" > </ select > < br >   
    41. < script   language = "javascript" >   
    42. <!--  
    43. watch_ini(" 黑","色","头","发","紫","色","头","发"); // 初始关键词  
    44. //-->   
    45. </ script >   
    46. < input   type = "text"   name = "word"   /> < br   />   
    47. < input   type = "button"   value = " 增加"   onclick = "watch_add(this.form);"   />   
    48. < input   type = "button"   value = " 修改"   onclick = "watch_mod(this.form);"   />   
    49. < input   type = "button"   value = " 删除"   onclick = "watch_del(this.form);"   />   
    50. < input   type = "button"   value = " 保存"   onclick = "watch_set(this.form);"   />   
    51. </ form >   
    52. </ body >   
    53. </ html >  
  • 相关阅读:
    骆驼命名法，帕斯卡命名法和匈牙利命名法<转>
    海量数据库查询优化<转>
    备份数据库并生成Rar
    标准http状态码[英文注释版本]<转>
    IIS自动停止，iis自动关闭。应用程序池假死、自动重启以及iis权限等解决办法 <转>
    Flex/Silverlight的技术比较<转>
    .NET平台测试驱动开发模拟框架Moq简明教程（实例剖析）<转>
    VisualStudio用IE8调试时遇到的问题(转)
    English learning
    JS调用WebService示例
  • 原文地址：https://www.cnblogs.com/zqn518/p/2872855.html
Copyright © 2011-2022 走看看