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

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

2024-07-21 21:27:40   222人阅读

收藏一下

1、判断select选项中 是否存在Value=http://www.mamicode.com/”paraValue”的Item
2、向select选项中 加入一个Item
3、从select选项中 删除一个Item
4、删除select中选中的项
5、修改select选项中 value=http://www.mamicode.com/”paraValue”的text为”paraText”
6、设置select中text=”paraText”的第一个Item为选中
7、设置select中value=http://www.mamicode.com/”paraValue”的Item为选中
8、得到select的当前选中项的value
9、得到select的当前选中项的text
10、得到select的当前选中项的Index
11、清空select的项

 

    1. //js 代码  
    2. // 1.判断select选项中 是否存在Value="http://www.mamicode.com/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. // 4.删除select中选中的项  
    43. function jsRemoveSelectedItemFromSelect(objSelect) {  
    44.     var length = objSelect.options.length - 1;  
    45.     for(var i = length; i >= 0; i--){  
    46.         if(objSelect[i].selected == true){  
    47.             objSelect.options[i] = null;  
    48.         }  
    49.     }  
    50. }        
    51.   
    52. // 5.修改select选项中 value="http://www.mamicode.com/paraValue"的text为"paraText"  
    53. function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {  
    54.     //判断是否存在  
    55.     if (jsSelectIsExitItem(objSelect, objItemValue)) {  
    56.         for (var i = 0; i < objSelect.options.length; i++) {  
    57.             if (objSelect.options[i].value == objItemValue) {  
    58.                 objSelect.options[i].text = objItemText;  
    59.                 break;  
    60.             }  
    61.         }  
    62.         alert("成功修改");  
    63.     } else {  
    64.         alert("该select中 不存在该项");  
    65.     }  
    66. }          
    67.   
    68. // 6.设置select中text="paraText"的第一个Item为选中  
    69. function jsSelectItemByValue(objSelect, objItemText) {  
    70.     //判断是否存在  
    71.     var isExit = false;  
    72.     for (var i = 0; i < objSelect.options.length; i++) {  
    73.         if (objSelect.options[i].text == objItemText) {  
    74.             objSelect.options[i].selected = true;  
    75.             isExit = true;  
    76.             break;  
    77.         }  
    78.     }  
    79.     //Show出结果  
    80.     if (isExit) {  
    81.         alert("成功选中");  
    82.     } else {  
    83.         alert("该select中 不存在该项");  
    84.     }  
    85. }          
    86.   
    87. // 7.设置select中value="http://www.mamicode.com/paraValue"的Item为选中  
    88. document.all.objSelect.value = objItemValue;      
    89.   
    90. // 8.得到select的当前选中项的value  
    91. var currSelectValue = document.all.objSelect.value;      
    92.   
    93. // 9.得到select的当前选中项的text  
    94. var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;      
    95.   
    96. // 10.得到select的当前选中项的Index  
    97. var currSelectIndex = document.all.objSelect.selectedIndex;      
    98.   
    99. // 11.清空select的项  
    100. document.all.objSelect.options.length = 0;  

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


联系
我们