J度空間

          javascript操作Select標記中options集合

          先來看看options集合的這幾個方法:
          options.add(option)方法向集合里添加一項option對象;
          options.remove(index)方法移除options集合中的指定項;
          options(index)或options.item(index)可以通過索引獲取options集合的指定項;

          ??? var?selectTag?=?null;?//select標記
          ????var?OPTONLENGTH?=?10;?//每次填充option數
          ????var?colls?=?[];???????//對select標記options的引用

          ????window.onload?
          =?function(){
          ????????selectTag?
          =?document.getElementById("SelectBox");?//獲取select標記????????
          ????????colls?=?selectTag.options;?//獲取引用
          ????????//initSelectBox();????//自初始化select.options
          ????};
          ????
          ????
          //使用隨機數填充select.options
          ????function?initSelectBox(){
          ????????
          var?random?=?0?;
          ????????
          var?optionItem?=?null;
          ????????
          var?item?=?null;
          ????????
          ????????
          if(colls.length?>?0?&&?isClearOption()){
          ?????????????clearOptions(colls);
          ????????}

          ????????
          for(var?i=0;i<OPTONLENGTH;i++){
          ?????????????
          ????????????random?
          =?Math.floor(Math.random()*9000)+1000;
          ????????????item?
          =?new?Option(random,random);????//通過Option()構造函數創建option對象????????
          ????????????selectTag.options.add(item);?//添加到options集合中
          ????????}????
          ????????
          ????????watchState();
          ????}
          ????
          //添加新option項前是否清空當前options
          ????function?isClearOption(){
          ????????
          return?document.getElementById("chkClear").checked;
          ????}
          ????
          //清空options集合
          ????function?clearOptions(colls){
          ????????
          var?length?=?colls.length;
          ????????
          for(var?i=length-1;i>=0;i--){
          ????????????colls.remove(i);
          ????????}
          ????}
          ????
          //添加一項新option
          ????function?addOption(){
          ????????colls.add(createOption());
          ????????lastOptionOnFocus(colls.length
          -1);
          ????????watchState();
          ????}
          ????
          //創建一個option對象
          ????function?createOption(){
          ????????
          var?random?=?Math.floor(Math.random()*9000)+1000;
          ????????
          return?new?Option(random,random);
          ????}
          ????
          //刪除options集合中指定的一項option
          ????function?removeOption(index){????????
          ????????
          if(index?>=?0){
          ????????????colls.remove(index);
          ????????????lastOptionOnFocus(colls.length
          -1);
          ????????}
          ????????watchState();
          ????}
          ????
          //獲取當前選定的option索引
          ????function?getSelectedIndex(){
          ????????
          return?selectTag.selectedIndex;
          ????}
          ????
          //獲取options集合的總數
          ????function?getOptionLength(){
          ????????
          return?colls.length;
          ????}
          ????
          //獲取當前選定的option文本
          ????function?getCurrentOptionValue(index){
          ????????
          if(index?>=?0)
          ????????????
          return?colls(index).value;
          ????}
          ????
          //獲取當前選定的option值
          ????function?getCurrentOptionText(index){
          ????????
          if(index?>=?0)
          ????????????
          return?colls(index).text;
          ????}
          ????
          //使用options集合中最后一項獲取焦點
          ????function?lastOptionOnFocus(index){
          ????????selectTag.selectedIndex?
          =?index;
          ????}
          ????
          //顯示當select標記狀態
          ????function?watchState(){
          ????????
          var?divWatch?=?document.getElementById("divWatch");
          ????????
          var?innerHtml="";
          ????????innerHtml??
          =?"option總數:"?+?getOptionLength();
          ????????innerHtml?
          +=?"<br/>當前項索引:"?+?getSelectedIndex();
          ????????innerHtml?
          +=?"<br/>當前項文本:"?+?getCurrentOptionText(getSelectedIndex());
          ????????innerHtml?
          +=?"<br/>當前項值:"?+?getCurrentOptionValue(getSelectedIndex());
          ????????divWatch.innerHTML?
          =?innerHtml;
          ????????divWatch.align?
          =?"justify";
          ????}

          posted on 2007-08-16 17:24 藍色幽默 閱讀(562) 評論(0)  編輯  收藏 所屬分類: 網頁設計

          導航

          <2025年7月>
          293012345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789

          統計

          常用鏈接

          留言簿(4)

          隨筆分類

          文章分類

          相冊

          搜索

          最新評論

          主站蜘蛛池模板: 阿拉善右旗| 类乌齐县| 家居| 赫章县| 仁寿县| 信阳市| 巩义市| 宜兰县| 东明县| 江北区| 洪泽县| 孟津县| 武宣县| 博白县| 光山县| 竹溪县| 庐江县| 淮安市| 河北区| 栾城县| 拜城县| 疏勒县| 布拖县| 台前县| 额济纳旗| 延边| 来宾市| 宝山区| 昌图县| 宜州市| 静安区| 梓潼县| 康平县| 普定县| 印江| 新野县| 资源县| 嘉黎县| 河西区| 宁城县| 蛟河市|