转 JavaScript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

收藏一下

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的项

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. // 2.向select选项中 加入一个Item
14. function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
15. //判断是否存在
16. if (jsSelectIsExitItem(objSelect, objItemValue)) {
17. alert("该Item的Value值已经存在");
18. } else {
19. var varItem = new Option(objItemText, objItemValue);
20. objSelect.options.add(varItem);
21. alert("成功加入");
22. }
23. }
24. // 3.从select选项中 删除一个Item
25. function jsRemoveItemFromSelect(objSelect, objItemValue) {
26. //判断是否存在
27. if (jsSelectIsExitItem(objSelect, objItemValue)) {
28. for (var i = 0; i < objSelect.options.length; i++) {
29. if (objSelect.options[i].value == objItemValue) {
30. objSelect.options.remove(i);
31. break;
32. }
33. }
34. alert("成功删除");
35. } else {
36. alert("该select中 不存在该项");
37. }
38. }
39. // 4.删除select中选中的项
40. function jsRemoveSelectedItemFromSelect(objSelect) {
41. var length = objSelect.options.length - 1;
42. for(var i = length; i >= 0; i--){
43. if(objSelect[i].selected == true){
44. objSelect.options[i] = null;
45. }
46. }
47. }
48. // 5.修改select选项中 value="paraValue"的text为"paraText"
49. function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
50. //判断是否存在
51. if (jsSelectIsExitItem(objSelect, objItemValue)) {
52. for (var i = 0; i < objSelect.options.length; i++) {
53. if (objSelect.options[i].value == objItemValue) {
54. objSelect.options[i].text = objItemText;
55. break;
56. }
57. }
58. alert("成功修改");
59. } else {
60. alert("该select中 不存在该项");
61. }
62. }
63. // 6.设置select中text="paraText"的第一个Item为选中
64. function jsSelectItemByValue(objSelect, objItemText) {
65. //判断是否存在
66. var isExit = false;
67. for (var i = 0; i < objSelect.options.length; i++) {
68. if (objSelect.options[i].text == objItemText) {
69. objSelect.options[i].selected = true;
70. isExit = true;
71. break;
72. }
73. }
74. //Show出结果
75. if (isExit) {
76. alert("成功选中");
77. } else {
78. alert("该select中 不存在该项");
79. }
80. }
81. // 7.设置select中value="paraValue"的Item为选中
82. document.all.objSelect.value = objItemValue;
83. // 8.得到select的当前选中项的value
84. var currSelectValue = document.all.objSelect.value;
85. // 9.得到select的当前选中项的text
86. var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
87. // 10.得到select的当前选中项的Index
88. var currSelectIndex = document.all.objSelect.selectedIndex;
89. // 11.清空select的项
90. document.all.objSelect.options.length = 0;