js select option对象小结

来源：互联网发布：php工资管理系统源码编辑：程序博客网时间：2024/05/20 19:17

一基础理解:

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代码:

复制代码代码如下:

</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>

0 0