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

清空select的项

Html 代码

1. // document.all.objSelect.options.length = 0;

1. // document.all.objSelect.options.length = 0;

如果留下第一行的话就是

Html 代码

document.all.objSelect.options.length = 1;

document.all.objSelect.options.length = 1;

判断select选项中 是否存在Value="paraValue"的Item

Js 代码

    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;
}

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; } 

向select选项中 加入一个Item

Js 代码

 1. function jsAddItemToSelect(objSelect,objItemText,objItemValue)
 2. {
 3.      // 判断是否存在
 4.      if(jsSelectIsExitItem(objSelect,objItemValue))
 5.      {
 6.          alert(" 该Item的Value值已经存在");
 7.      }
 8.      else
 9.      {
10.          var varItem = new Option(objItemText,objItemValue);
11. //       objSelect.options[objSelect.options.length] = varItem;
12.          objSelect.options.add(varItem);
13.          alert(" 成功加入");
14.      }
15. }

1. function jsAddItemToSelect(objSelect,objItemText,objItemValue) 2. { 3. // 判断是否存在 4. if(jsSelectIsExitItem(objSelect,objItemValue)) 5. { 6. alert(" 该Item的Value值已经存在"); 7. } 8. else 9. { 10. var varItem = new Option(objItemText,objItemValue); 11. // objSelect.options[objSelect.options.length] = varItem; 12. objSelect.options.add(varItem); 13. alert(" 成功加入"); 14. } 15. }

从select选项中 删除一个Item

Js 代码

 1. function jsRemoveItemFromSelect(objSelect,objItemValue)
 2. {
 3.      // 判断是否存在
 4.      if(jsSelectIsExitItem(objSelect,objItemValue))
 5.      {
 6.          for(var i=0;i<objSelect.options.length;i++)
 7.          {
 8.              if(objSelect.options[i].value == objItemValue)
 9.              {
10.                  objSelect.options.remove(i);
11.                  break;
12.              }
13.          }
14.          alert(" 成功删除");
15.      }
16.      else
17.      {
18.          alert(" 该select中 不存在该项");
19.      }
20. }

1. function jsRemoveItemFromSelect(objSelect,objItemValue) 2. { 3. // 判断是否存在 4. if(jsSelectIsExitItem(objSelect,objItemValue)) 5. { 6. for(var i=0;i<objSelect.options.length;i++) 7. { 8. if(objSelect.options[i].value == objItemValue) 9. { 10. objSelect.options.remove(i); 11. break; 12. } 13. } 14. alert(" 成功删除"); 15. } 16. else 17. { 18. alert(" 该select中 不存在该项"); 19. } 20. }

修改select选项中 value="paraValue"的text为"paraText"

Js代码

 1. function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)
 2. {
 3.      // 判断是否存在
 4.      if(jsSelectIsExitItem(objSelect,objItemValue))
 5.      {
 6.          for(var i=0;i<objSelect.options.length;i++)
 7.          {
 8.              if(objSelect.options[i].value == objItemValue)
 9.              {
10.                  objSelect.options[i].text = objItemText;
11.                  break;
12.              }
13.          }    alert(" 成功修改");
14.      }
15.      else
16.      {
17.          alert(" 该select中 不存在该项");
18.      }
19. }

1. function jsUpdateItemToSelect(objSelect,objItemText,objItemValue) 2. { 3. // 判断是否存在 4. if(jsSelectIsExitItem(objSelect,objItemValue)) 5. { 6. for(var i=0;i<objSelect.options.length;i++) 7. { 8. if(objSelect.options[i].value == objItemValue) 9. { 10. objSelect.options[i].text = objItemText; 11. break; 12. } 13. } alert(" 成功修改"); 14. } 15. else 16. { 17. alert(" 该select中 不存在该项"); 18. } 19. }

设置select中text="paraText"的第一个Item为选中

Js 代码

 1. function jsSelectItemByValue(objSelect,objItemText)
 2. {
 3.      // 判断是否存在
 4.      var isExit = false;
 5.      for(var i=0;i<objSelect.options.length;i++)
 6.      {
 7.          if(objSelect.options[i].text == objItemText)
 8.          {
 9.              objSelect.options[i].selected = true;
10.              isExit = true;
11.              break;
12.          }
13.      }
14.      //Show 出结果
15.      if(isExit)
16.      {
17.          alert(" 成功选中");
18.      }
19.      else
20.      {
21.          alert(" 该select中 不存在该项");
22.      }
23. }

1. function jsSelectItemByValue(objSelect,objItemText) 2. { 3. // 判断是否存在 4. var isExit = false; 5. for(var i=0;i<objSelect.options.length;i++) 6. { 7. if(objSelect.options[i].text == objItemText) 8. { 9. objSelect.options[i].selected = true; 10. isExit = true; 11. break; 12. } 13. } 14. //Show 出结果 15. if(isExit) 16. { 17. alert(" 成功选中"); 18. } 19. else 20. { 21. alert(" 该select中 不存在该项"); 22. } 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 >