javascript对select标签的控制(option选项/select)


Posted in Javascript onJanuary 31, 2013

html中的select标签,也是asp.net中的asp:DropDownList控件。
javascript对它们的操作
一、基础理解

var e = document.getElementById("selectId"); 
e. options= new Option("文本","值") ; 
//创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option> 
//options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签

1:options[ ]数组的属性:
length属性---------长度属性
selectedIndex属性--------当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)
2:单个option的属性(---obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个---)
text属性---------返回/指定 文本
value属性------返回/指定 值,与<options value="...">一致。
index属性-------返回下标,
selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false,可以动态的改变选中项
defaultSelected 属性-----返回该对象默认是否被选中。true / false。
3:option的方法
增加一个<option>标签-----obj.options.add(new("文本","值"));<增>
删除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>
获得一个<option>标签的文本-----obj.options[obj.selectedIndex].text<查>
修改一个<option>标签的值-----obj.options[obj.selectedIndex]=new Option("新文本","新值")<改>
删除所有<option>标签-----obj.options.length = 0
获得一个<option>标签的值-----obj.options[obj.selectedIndex].value
注意:
a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.
b:obj.option中的option不需要大写,new Option中的Option需要大写
二 、应用
<html> 
<head> 
<script language="javascript"> 
function number(){ 
var obj = document.getElementById("mySelect"); 
//obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变 
//obj.options.add(new Option("我的吃吃","4"));再添加一个option 
//alert(obj.selectedIndex);//显示序号,option自己设置的 
//obj.options[obj.selectedIndex].text = "我的吃吃";更改值 
//obj.remove(obj.selectedIndex);删除功能 
} 
</script> 
</head> 
<body> 
<select id="mySelect"> 
<option>我的包包</option> 
<option>我的本本</option> 
<option>我的油油</option> 
<option>我的担子</option> 
</select> 
<input type="button" name="button" value="查看结果" onclick="number();"> 
</body> 
</html>

1.动态创建select
function createSelect(){ 
var mySelect = document.createElement("select"); 
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect); 
}

2.添加选项option
function addOption(){ 
//根据id查找对象, 
var obj=document.getElementById('mySelect'); 
//添加一个选项 
obj.add(new Option("文本","值")); //这个只能在IE中有效 
obj.options.add(new Option("text","value")); //这个兼容IE与firefox 
}

3.删除所有选项option
function removeAll(){ 
var obj=document.getElementById('mySelect'); 
obj.options.length=0; 
}

4.删除一个选项option
function removeOne(){ 
var obj=document.getElementById('mySelect'); 
//index,要删除选项的序号,这里取当前选中选项的序号 
var index=obj.selectedIndex; 
obj.options.remove(index); 
}

5.获得选项option的值
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].value;

6.获得选项option的文本
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].text;

7.修改选项option
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index]=new Option("新文本","新值");

8.删除select
function removeSelect(){ 
var mySelect = document.getElementById("mySelect"); 
mySelect.parentNode.removeChild(mySelect); 
} 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html"> 
<head> 
<script language=JavaScript> 
function $(id) 
{ 
return document.getElementById(id) 
} 
function show() 
{ 
var selectObj=$("area") 
var myOption=document.createElement("option") 
myOption.setAttribute("value","10") 
myOption.appendChild(document.createTextNode("上海")) 
var myOption1=document.createElement("option") 
myOption1.setAttribute("value","100") 
myOption1.appendChild(document.createTextNode("南京")) 
selectObj.appendChild(myOption) 
selectObj.appendChild(myOption1) 
} 
function choice() 
{ 
var index=$("area").selectedIndex; 
var val=$("area").options[index].getAttribute("value") 
if(val==10) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var sh=document.createElement("select") 
sh.add(new Option("浦东新区","101")) 
sh.add(new Option("黄浦区","102")) 
sh.add(new Option("徐汇区","103")) 
sh.add(new Option("普陀区","104")) 
$("context").appendChild(sh) 
} 
if(val==100) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var nj=document.createElement("select") 
nj.add(new Option("玄武区","201")) 
nj.add(new Option("白下区","202")) 
nj.add(new Option("下关区","203")) 
nj.add(new Option("栖霞区","204")) 
$("context").appendChild(nj) 
} 
} 
function calc() 
{ 
var x=$("context").childNodes.length-1; 
alert(x) 
} 
function remove() 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
} 
</script> 
<body><div id="context"> 
<select id="area" on 
change="choice()"> 
</select> 
</div> 
<input type=button value="显示" onclick="show()"> 
<input type=button value="计算结点" onclick="calc()"> 
<input type=button value="删除" onclick="remove()"> 
</body> 
</html>

根据这些东西,自己用JQEURY AJAX+JSON实现了一个小功能如下:
JS代码:(只取了于SELECT相关的代码)
/** 
* @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现) 
* @prarm selectId 下拉列表的ID 
* @prarm method 要调用的方法名称 
* @prarm temp 此处存放软件ID 
* @prarm url 要跳转的地址 
*/ 
function linkAgeJson(selectId,method,temp,url){ 
$j.ajax({ 
type: "get",//使用get方法访问后台 
dataType: "json",//返回json格式的数据 
url: url,//要访问的后台地址 
data: "method=" + method+"&temp="+temp,//要发送的数据 
success: function(msg){//msg为返回的数据,在这里做数据绑定 
var data = msg.lists; 
coverJsonToHtml(selectId,data); 
} 
}); 
} 
/** 
* @description 将JSON数据转换成HTML数据格式 
* @prarm selectId 下拉列表的ID 
* @prarm nodeArray 返回的JSON数组 
* 
*/ 
function coverJsonToHtml(selectId,nodeArray){ 
//get select 
var tempSelect=$j("#"+selectId); 
//clear select value 
isClearSelect(selectId,'0'); 
var tempOption=null; 
for(var i=0;i<nodeArray.length;i++){ 
//create select Option 
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> '); 
//put Option to select 
tempSelect.append(tempOption); 
} 
// 获取退化构件列表 
getCpgjThgl(selectId,'thgjDm'); 
} 
/** 
* @description 清空下拉列表的值 
* @prarm selectId 下拉列表的ID 
* @prarm index 开始清空的下标位置 
*/ 
function isClearSelect(selectId,index){ 
var length=document.getElementById(selectId).options.length; 
while(length!=index){ 
//长度是在变化的,因为必须重新获取 
length=document.getElementById(selectId).options.length; 
for(var i=index;i<length;i++) 
document.getElementById(selectId).options.remove(i); 
length=length/2; 
} 
} 
/** 
* @description 获取退化构件列表 
* @prarm selectId1 引用软件下拉列表的ID 
* @prarm selectId2 退化构件下拉列表的ID 
*/ 
function getCpgjThgl(selectId1,selectId2){ 
var obj1=document.getElementById(selectId1);//引用软件下拉列表 
var obj2=document.getElementById(selectId2);//退化构件下拉列表 
var len=obj1.options.length; 
//当引用软件列表长度等于1时返回,不做操作 
if(len==1){ 
return false; 
} 
//清空下拉列表的值,两种方式都可以 
// isClearSelect(selectId2,'1'); 
document.getElementById(selectId2).length=1; 
for(var i=0;i<len; i++){ 
var option= obj1.options[i]; 
//引用软件被选中项不加入 
if(i!=obj1.selectedIndex){ 
//克隆OPTION并添加到SELECT中 
obj2.appendChild(option.cloneNode(true)); 
} 
} 
}

HTML代码:
<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1> 
<tr> 
<td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用软件:</td> 
<td class="Search_content_82"> 
<input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" > 
<input name="yyrjDm" id="yyrjDm" type="hidden" > 
<input type="button" class="Search_button_select" 
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择..."> 
</td> 
</tr> 
<tr> 
<td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版:</td> 
<td class="Search_content" id="yyfb"> 
<select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')"> 
</select> 
</td> 
</tr> 
<tr> 
<td class="Search_item">退化构件:</td> 
<td class="Search_content" id="thgj"> 
<select name="thgjDm" style="width:160" id="thgjDm"> 
<option value="-1" selected>无</option> 
</select> 
</td> 
</tr> 
</TABLE>
Javascript 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
vue小白入门教程
Apr 02 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 #Javascript
js+html+css实现鼠标移动div实例
Jan 30 #Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 #Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 #Javascript
js判断样式className同时增加class或删除class
Jan 30 #Javascript
编写针对IE的JS代码两种编写方法
Jan 30 #Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 #Javascript
You might like
PHP使用feof()函数读文件的方法
2014/11/07 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
js获取div高度的代码
2008/08/09 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python人民币小写转大写辅助工具
2018/06/20 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python网络应用开发知识点浅析
2019/05/28 Python
Python urllib.request对象案例解析
2020/05/11 Python
Python爬虫与反爬虫大战
2020/07/30 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
法人代表授权委托书
2014/04/08 职场文书
高考寄语大全
2014/04/08 职场文书
学校文明单位申报材料
2014/05/06 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
运动会通讯稿600字
2015/07/20 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python