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 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
JS运算符简单用法示例
Jan 19 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
多人战的战术与战略
2020/03/04 星际争霸
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
UDP协议功能
2013/01/06 面试题
九一八事变演讲稿
2014/09/05 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
中学生学习保证书
2015/02/26 职场文书