對這文章發表回應
發表限制: 非會員 可以發表
發表者: 冷日 發表時間: 2009/1/16 3:20:03
Javascript 操作select控件大全(新增、修改、刪除、選中、清空、判斷存在等)
Posted on 2007-08-08 14:56 禮拜一 閱讀(16254) 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的項
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[i].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[i].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[i].selected == true
) {
objSelect.options[i] = 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[i].value == objItemValue)
{
objSelect.options[i].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[i].text == objItemText)
{
objSelect.options[i].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[document.all.objSelect.selectedIndex].text;
// 10.得到select的當前選中項的Index
var currSelectIndex =
document.all.objSelect.selectedIndex;
// 11.清空select的項
document.all.objSelect.options.length = 0 ;
原文出處:Javascript 操作select控件大全(新增、修改、刪除、選中、清空、判斷存在等) - 成為自己比什麼都重要!