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

lixg425 发表于 2013-1-22 21:50:07

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

http://www.webshowme.com/04js/content.asp?id=1642
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的项
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item      
function jsSelectIsExitItem(objSelect, objItemValue) {      
    var isExit = false;      
    for (var i = 0; i < objSelect.options.length; i++) {      
      if (objSelect.options.value == objItemValue) {      
            isExit = true;      
            break;      
      }      
    }      
    return isExit;      
}         
   
// 2.向select选项中 加入一个Item      
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {      
    //判断是否存在      
    if (jsSelectIsExitItem(objSelect, objItemValue)) {      
      alert("该Item的Value值已经存在");      
    } else {      
      var varItem = new Option(objItemText, objItemValue);      
      objSelect.options.add(varItem);   
      alert("成功加入");   
    }      
}      
   
// 3.从select选项中 删除一个Item      
function jsRemoveItemFromSelect(objSelect, objItemValue) {      
    //判断是否存在      
    if (jsSelectIsExitItem(objSelect, objItemValue)) {      
      for (var i = 0; i < objSelect.options.length; i++) {      
            if (objSelect.options.value == objItemValue) {      
                objSelect.options.remove(i);      
                break;      
            }      
      }      
      alert("成功删除");      
    } else {      
      alert("该select中 不存在该项");      
    }      
}   
   
   
// 4.删除select中选中的项   
function jsRemoveSelectedItemFromSelect(objSelect) {      
    var length = objSelect.options.length - 1;   
    for(var i = length; i >= 0; i--){   
      if(objSelect.selected == true){   
            objSelect.options = null;   
      }   
    }   
}      
   
// 5.修改select选项中 value="paraValue"的text为"paraText"      
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {      
    //判断是否存在      
    if (jsSelectIsExitItem(objSelect, objItemValue)) {      
      for (var i = 0; i < objSelect.options.length; i++) {      
            if (objSelect.options.value == objItemValue) {      
                objSelect.options.text = objItemText;      
                break;      
            }      
      }      
      alert("成功修改");      
    } else {      
      alert("该select中 不存在该项");      
    }      
}      
   
// 6.设置select中text="paraText"的第一个Item为选中      
function jsSelectItemByValue(objSelect, objItemText) {            
    //判断是否存在      
    var isExit = false;      
    for (var i = 0; i < objSelect.options.length; i++) {      
      if (objSelect.options.text == objItemText) {      
            objSelect.options.selected = true;      
            isExit = true;      
            break;      
      }      
    }            
    //Show出结果      
    if (isExit) {      
      alert("成功选中");      
    } else {      
      alert("该select中 不存在该项");      
    }      
}      
   
// 7.设置select中value="paraValue"的Item为选中   
document.all.objSelect.value = objItemValue;   
      
// 8.得到select的当前选中项的value   
var currSelectValue = document.all.objSelect.value;   
      
// 9.得到select的当前选中项的text   
var currSelectText = document.all.objSelect.options.text;   
      
// 10.得到select的当前选中项的Index   
var currSelectIndex = document.all.objSelect.selectedIndex;   
      
// 11.清空select的项   
document.all.objSelect.options.length = 0;

查看完整版本: Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）