javascript操作Select標記中options集合
先來看看options集合的這幾個方法:
options.add(option)方法向集合里添加一項option對象;
options.remove(index)方法移除options集合中的指定項;
options(index)或options.item(index)可以通過索引獲取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";
????}
????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) 編輯 收藏 所屬分類: 網頁設計