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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
JS实现随机数生成算法示例代码
2013/08/08 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
javascript操作cookie
2017/01/17 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
幼儿园教研活动方案
2014/01/19 职场文书
自荐信需注意事项
2014/01/25 职场文书
单位成立周年感言
2014/01/26 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python