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 藍色幽默 閱讀(557) 評論(0)  編輯  收藏 所屬分類: 網頁設計

          導航

          <2025年6月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          統計

          常用鏈接

          留言簿(4)

          隨筆分類

          文章分類

          相冊

          搜索

          最新評論

          主站蜘蛛池模板: 阿图什市| 清镇市| 喀喇沁旗| 都匀市| 平陆县| 哈尔滨市| 赞皇县| 定襄县| 思南县| 凤凰县| 盱眙县| 手机| 恩施市| 乌鲁木齐县| 平原县| 辽中县| 安义县| 桂平市| 铜川市| 南郑县| 通渭县| 淳化县| 永善县| 工布江达县| 通江县| 梅州市| 汉源县| 金寨县| 内丘县| 工布江达县| 菏泽市| 吴江市| 云龙县| 防城港市| 突泉县| 大足县| 巴林右旗| 神农架林区| 乌拉特前旗| 雅江县| 昌都县|