JS 操作 select 用法大全

null

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

2.  2向select选项中 加入一个Item 

3.  3从select选项中 删除一个Item 

4.  4删除select中选中的项 

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

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

7.  7设置select中value="paraValue"的Item为选中 

8.  8得到select的当前选中项的value 

9.  9得到select的当前选中项的text 

10. 10得到select的当前选中项的Index 

11. 11清空select的项 

1. js 代码

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

3. function jsSelectIsExitItem(objSelect, objItemValue) {        

4.     var isExit = false;        

5.     for (var i = 0; i < objSelect.options.length; i++) {        

6.         if (objSelect.options[i].value == objItemValue) {        

7.             isExit = true;        

8.             break;        

9.         }        

10.     }        

11.     return isExit;        

12. }         

13.    

14. // 2.向select选项中 加入一个Item        

15. function jsAddItemToSelect(objSelect, objItemText, objItemValue) {        

16.     //判断是否存在        

17.     if (jsSelectIsExitItem(objSelect, objItemValue)) {        

18.         alert("该Item的Value值已经存在");        

19.     } else {        

20.         var varItem = new Option(objItemText, objItemValue);      

21.         objSelect.options.add(varItem);     

22.         alert("成功加入");     

23.     }        

24. }        

25.    

26. // 3.从select选项中 删除一个Item        

27. function jsRemoveItemFromSelect(objSelect, objItemValue) {        

28.     //判断是否存在        

29.     if (jsSelectIsExitItem(objSelect, objItemValue)) {        

30.         for (var i = 0; i < objSelect.options.length; i++) {        

31.             if (objSelect.options[i].value == objItemValue) {        

32.                 objSelect.options.remove(i);        

33.                 break;        

34.             }        

35.         }        

36.         alert("成功删除");        

37.     } else {        

38.         alert("该select中 不存在该项");        

39.     }        

40. }    

41.    

42.    

43. // 4.删除select中选中的项    

44. function jsRemoveSelectedItemFromSelect(objSelect) {        

45.     var length = objSelect.options.length - 1;    

46.     for(var i = length; i >= 0; i--){    

47.         if(objSelect[i].selected == true){    

48.             objSelect.options[i] = null;    

49.         }    

50.     }    

51. }      

52.    

53. // 5.修改select选项中 value="paraValue"的text为"paraText"        

54. function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {        

55.     //判断是否存在        

56.     if (jsSelectIsExitItem(objSelect, objItemValue)) {        

57.         for (var i = 0; i < objSelect.options.length; i++) {        

58.             if (objSelect.options[i].value == objItemValue) {        

59.                 objSelect.options[i].text = objItemText;        

60.                 break;        

61.             }        

62.         }        

63.         alert("成功修改");        

64.     } else {        

65.         alert("该select中 不存在该项");        

66.     }        

67. }        

68.    

69. // 6.设置select中text="paraText"的第一个Item为选中        

70. function jsSelectItemByValue(objSelect, objItemText) {            

71.     //判断是否存在        

72.     var isExit = false;        

73.     for (var i = 0; i < objSelect.options.length; i++) {        

74.         if (objSelect.options[i].text == objItemText) {        

75.             objSelect.options[i].selected = true;        

76.             isExit = true;        

77.             break;        

78.         }        

79.     }              

80.     //Show出结果        

81.     if (isExit) {        

82.         alert("成功选中");        

83.     } else {        

84.         alert("该select中 不存在该项");        

85.     }        

86. }        

87.    

88. // 7.设置select中value="paraValue"的Item为选中    

89. document.all.objSelect.value = objItemValue;    

90.        

91. // 8.得到select的当前选中项的value    

92. var currSelectValue = document.all.objSelect.value;    

93.        

94. // 9.得到select的当前选中项的text    

95. var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    

96.        

97. // 10.得到select的当前选中项的Index    

98. var currSelectIndex = document.all.objSelect.selectedIndex;    

99.        

100. // 11.清空select的项    

101. document.all.objSelect.options.length = 0;   

转载于:https://my.oschina.net/u/2255040/blog/335046