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

转自:

24人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册