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 相关文章推荐
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JavaScript实现星级评分
Jan 12 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
vue.js循环radio的实例
Nov 07 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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
smarty的保留变量问题
2008/10/23 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
基于jQuery的图片剪切插件
2011/08/03 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
python进阶教程之循环对象
2014/08/30 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python 加密与解密小结
2018/12/06 Python
Django的models中on_delete参数详解
2019/07/16 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
人民教师的自我评价分享
2014/02/21 职场文书
初中作文评语大全
2014/04/23 职场文书
小学生交通安全寄语
2015/02/27 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
python - asyncio异步编程
2021/04/06 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers