js select option对象小结


Posted in Javascript onDecember 20, 2013

一基础理解:

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 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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
javascript date格式化示例
Sep 25 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 #Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 #Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 #Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 #Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 #Javascript
js获取select选中的option的text示例代码
Dec 19 #Javascript
js 高效去除数组重复元素示例代码
Dec 19 #Javascript
You might like
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
php ios推送(代码)
2013/07/01 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
jQuery知识点整理
2015/01/30 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
python实现电子词典
2020/03/03 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
公司门卫岗位职责
2014/03/15 职场文书
美术指导求职信
2014/03/17 职场文书
写给父母的感谢信
2015/01/22 职场文书
焦点访谈观后感
2015/06/11 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL