js select option对象小结
2015-06-15 10:51
495 查看
一基础理解:
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>
根据这些东西,自己用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 ali
4000
gn=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>
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>
根据这些东西,自己用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 ali
4000
gn=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js预加载图片方法汇总
- extjs Combobox添加空行
- IE对象不支持此属性或方法: this.indexOf 的解决方法
- js过滤HTML标签以及
- JavaScript 历史版本
- ExtJs-3.4引入的基本文件
- JavaScript 开发进阶：理解 JavaScript 作用域和作用域链
- 探索javascript----this的指向问题
- JavaScript中使用Math.floor()方法对数字取整
- JavaScript中使用指数方法Math.exp()的简介
- js对数组的相关操作
- 学习Extjs4 (1) 提示框 Ext.MessageBox
- Js获取当前日期时间及其它操作
- ExtJs学习之MessAgeBox的使用
- jsp实现分页技巧
- 简介JavaScript中Math.cos()余弦方法的使用
- 在Ext JS 5应用程序中如何使用路由
- JS - 事件代理
- JavaScript中的Math.atan2()方法使用详解
- 谁说JS不能调试