首页 > 网络编程 > JavaScript > javascript技巧 > javascript控制select

javascript操作select参考代码

2008-06-01 20:17:56 作者：

用js控制select的方法，大家可以参考下

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;

上面的是从网上搜集的，现在看看根据上面的内容做的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>javascript select结合_脚本之家_www.jb51.net</title> 
<script language="javascript" type="text/javascript">

function vtOption(){ 
var s1=document.getElementById("select1"); 
var sV=s1.options[s1.selectedIndex].value; 
var sT=s1.options[s1.selectedIndex].text; 
alert(sV+"\n"+sT); 
}

function addOption1(){ 
var s1=document.getElementById("select1"); 
var newOp1=new Option; 
newOp1.value="3"; 
newOp1.text="这是3"; 
var newOp2=new Option; 
newOp2.value="4"; 
newOp2.text="这是4"; 
s1.add(newOp1); 
s1.add(newOp2); 
}

function addOption2(){ 
var s1=document.getElementById("select1"); 
for(var i=3;i<5;i++){ 
var newOp1=new Option("这是"+i,i); 
//var newOp1=new Option; 
//newOp1.value=i; 
//newOp1.text="这是"+i; 
s1.add(newOp1); 
} 
}

function addOption3(){ 
var s1=document.getElementById("select1"); 
s1.options.length=0;//清除以前的选项 
for(var i=3;i<7;i++){ 
var newOp1=new Option("这是"+i,i); 
//var newOp1=new Option; 
//newOp1.value=i; 
//newOp1.text="这是"+i; 
s1.add(newOp1); 
} 
}

function remOption(){ 
var s1=document.getElementById("select1"); 
for(var i=s1.options.length;i>=0;i--){ 
s1.options.remove(i); 
} 
}

function remOptionSelected(){ 
var s1=document.getElementById("select1"); 
var i=s1.selectedIndex; 
//alert(i); 
s1.options.remove(i); 
} 
</script> 
</head>

<body> 
<select name="select" id="select1"> 
<option value="1">这是1</option> 
<option value="2">这是2</option> 
</select>
 
<a href="javascript:vtOption()">取值</a>&nbsp;&nbsp;<a href="javascript:addOption1()">增加1</a>&nbsp;&nbsp;<a href="javascript:addOption2()">增加2</a>&nbsp;&nbsp;<a href="javascript:addOption3()">增加3</a>&nbsp;&nbsp;<a href="javascript:remOption()">删除选项</a> 
&nbsp;&nbsp;<a href="javascript:remOptionSelected()">删除选取选项</a> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript操作select参考代码

您可能感兴趣的文章: