002.JavaScript操作select控件
2017-04-19 本文已影响0人
胖先森
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select控件测试</title>
</head>
<body>
<select id="mySel">
</select>
<input type="text" id="id" placeholder="请输入要移除的ID号码">
<hr/>
<button id="btn1" type="button" >初始化数据</button>
<button id="btn2" type="button" >测试移除操作</button>
<button id="btn3" type="button" >测试移除选中的项目</button>
<button id="btn4" type="button" >修改选中项目的显示名称</button>
<button id="btn5" type="button" >设置1002选择状态</button>
<button id="btn6" type="button" >获取当前项目的文字,属性,索引</button>
<button id="btn7" type="button" >清空列表</button>
<script type="text/javascript">
window.onload=function () {
var objSelect = document.getElementById("mySel");
document.getElementById("btn1").onclick=function () {
//获取option的长度
var length = objSelect.options.length;
if(length==0){
alert("没有内容,添加默认内容");
//使用innerHTML操作,方式一
objSelect.innerHTML="<option value=''>请选择你的部门</option>";
//设置按钮为可用
this.disabled=false;
}else{
//设置按钮为不可用
this.disabled=true;
//使用本地对象添加数据,方式二
var valItem = new Option("测试部","1001");
//添加操作
objSelect.options.add(valItem);
var valItem = new Option("软件部","1002");
//添加操作
objSelect.options.add(valItem);
var valItem = new Option("研发部","1003");
//添加操作
objSelect.options.add(valItem);
}
}
document.getElementById("btn2").onclick=function () {
//获取输入的ID号码
var id = document.getElementById("id").value;
var length = objSelect.options.length;
//判断
if(length>0){
//迭代
for(var i = 0 ;i<length;i++){
if(objSelect.options[i].value==id){
//移除操作,方式一
objSelect.options.remove(i);
break;//跳出循环
}
}
}else{
alert("没有项目,空白的!");
document.getElementById("btn1").disabled=false;
}
}
document.getElementById("btn3").onclick=function () {
var length = objSelect.options.length;
for(var i = 0 ;i<length;i++){
if(objSelect.options[i].selected){
//移除操作,方式二
objSelect.options[i]=null;
break;//跳出循环
}
}
}
document.getElementById("btn4").onclick=function () {
//设置两个简单变量,不弄复杂化的操作了
var oValue = 1001;
//修改内容
var modText = "修改为胖先森";
var modValue = 101;
var length = objSelect.options.length;
for(var i = 0 ;i<length;i++){
if(objSelect.options[i].value==oValue){
objSelect.options[i].text=modText;
objSelect.options[i].value=modValue;
break;//跳出循环
}
}
}
document.getElementById("btn5").onclick=function () {
//方式一:推荐方式
objSelect.value=1002;
//方式二
/*var length = objSelect.options.length;
for(var i = 0 ;i<length;i++){
if(objSelect.options[i].value==1002){
objSelect.options[i].selected=true;
break;//跳出循环
}
}*/
}
document.getElementById("btn6").onclick=function () {
alert("当前的索引:"+objSelect.selectedIndex);
alert("当前的文字:"+objSelect.options[objSelect.selectedIndex].text);
alert("当前值,方式一:"+objSelect.options[objSelect.selectedIndex].value);
alert("当前值,推荐方式二:"+objSelect.value);
}
document.getElementById("btn7").onclick=function () {
//不使用DOM操作,清空
objSelect.options.length=0;
document.getElementById("btn1").disabled=false;
}
}
</script>
</body>
</html>
