js select option對(duì)象小結(jié)

更新時(shí)間：2013年12月20日 09:32:45 作者：

本篇文章主要是對(duì)js中的select option對(duì)象進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

一基礎(chǔ)理解:

var e = document.getElementById("selectId");

e. options= new Option("文本","值") ;

//創(chuàng)建一個(gè)option對(duì)象,即在<select>標(biāo)簽中創(chuàng)建一個(gè)或多個(gè)<option value="值">文本</option>

//options是個(gè)數(shù)組,里面可以存放多個(gè)<option value="值">文本</option>這樣的標(biāo)簽

1:options[ ]數(shù)組的屬性:

length屬性---------長度屬性

selectedIndex屬性--------當(dāng)前被選中的框中的文本的索引值,此索引值是內(nèi)存自動(dòng)分配的(0,1,2,3.....)對(duì)應(yīng)(第一個(gè)文本值,第二個(gè)文本值,第三個(gè)文本值,第四個(gè)文本值..........)

2:單個(gè)option的屬性(---obj.options[obj.selecedIndex]是指定的某個(gè)<option>標(biāo)簽,是一個(gè)---)

text屬性---------返回/指定文本

value屬性------返回/指定值，與<options value="...">一致。

index屬性-------返回下標(biāo),

selected 屬性-------返回/指定該對(duì)象是否被選中.通過指定 true 或者 false，可以動(dòng)態(tài)的改變選中項(xiàng)

defaultSelected 屬性-----返回該對(duì)象默認(rèn)是否被選中。true / false。

3:option的方法

增加一個(gè)<option>標(biāo)簽-----obj.options.add(new("文本","值"));<增>

刪除一個(gè)<option>標(biāo)簽-----obj.options.remove(obj.selectedIndex)<刪>

獲得一個(gè)<option>標(biāo)簽的文本-----obj.options[obj.selectedIndex].text<查>

修改一個(gè)<option>標(biāo)簽的值-----obj.options[obj.selectedIndex]=new Option("新文本","新值")<改>

刪除所有<option>標(biāo)簽-----obj.options.length = 0

獲得一個(gè)<option>標(biāo)簽的值-----obj.options[obj.selectedIndex].value

注意:

a:上面的寫的是如這樣類型的方法obj.options.function()而不寫obj.funciton,是因?yàn)闉榱丝紤]在IE和FF 下的兼容,如obj.add()只能在IE中有效.

b:obj.option中的option不需要大寫,new Option中的Option需要大寫

二應(yīng)用

復(fù)制代碼代碼如下:

<html> 
<head> 
<script language="javascript"> 
function number(){ 
var obj = document.getElementById("mySelect"); 
    //obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在當(dāng)前選中的那個(gè)的值中改變 
    //obj.options.add(new Option("我的吃吃","4"));再添加一個(gè)option 
    //alert(obj.selectedIndex);//顯示序號(hào)，option自己設(shè)置的 
    //obj.options[obj.selectedIndex].text = "我的吃吃";更改值 
   //obj.remove(obj.selectedIndex);刪除功能 
} 
</script> 
</head> 
<body> 
<select id="mySelect"> 
     <option>我的包包</option> 
     <option>我的本本</option> 
     <option>我的油油</option> 
     <option>我的擔(dān)子</option> 
</select> 
<input type="button" name="button" value="查看結(jié)果" onclick="number();"> 
</body> 
</html> 

根據(jù)這些東西,自己用JQEURY AJAX+JSON實(shí)現(xiàn)了一個(gè)小功能如下:

JS代碼:(只取了于SELECT相關(guān)的代碼)

復(fù)制代碼代碼如下:

/**
   * @description 構(gòu)件聯(lián)動(dòng)下拉列表 (用JQUERY 的AJAX配合JSON實(shí)現(xiàn))
   * @prarm selectId 下拉列表的ID
   * @prarm method 要調(diào)用的方法名稱
   * @prarm temp 此處存放軟件ID
   * @prarm url 要跳轉(zhuǎn)的地址
   */
function linkAgeJson(selectId,method,temp,url){
      $j.ajax({
            type: "get",//使用get方法訪問后臺(tái)
            dataType: "json",//返回json格式的數(shù)據(jù)
            url: url,//要訪問的后臺(tái)地址
            data: "method=" + method+"&temp="+temp,//要發(fā)送的數(shù)據(jù)
            success: function(msg){//msg為返回的數(shù)據(jù)，在這里做數(shù)據(jù)綁定
                var data = msg.lists;
                coverJsonToHtml(selectId,data);
            }
        });
}

/**
* @description 將JSON數(shù)據(jù)轉(zhuǎn)換成HTML數(shù)據(jù)格式
* @prarm selectId 下拉列表的ID
* @prarm nodeArray 返回的JSON數(shù)組
*
*/
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);
        }
        // 獲取退化構(gòu)件列表
       getCpgjThgl(selectId,'thgjDm');
   }
   /**
   * @description 清空下拉列表的值
   * @prarm selectId 下拉列表的ID
   * @prarm index 開始清空的下標(biāo)位置
   */
function isClearSelect(selectId,index){
     var length=document.getElementById(selectId).options.length;
while(length!=index){
      //長度是在變化的，因?yàn)楸仨氈匦芦@取
          length=document.getElementById(selectId).options.length;
          for(var i=index;i<length;i++)
             document.getElementById(selectId).options.remove(i);
         length=length/2;
     }
   }

/**
* @description 獲取退化構(gòu)件列表
* @prarm selectId1 引用軟件下拉列表的ID
* @prarm selectId2 退化構(gòu)件下拉列表的ID
*/
   function getCpgjThgl(selectId1,selectId2){
   var obj1=document.getElementById(selectId1);//引用軟件下拉列表
   var obj2=document.getElementById(selectId2);//退化構(gòu)件下拉列表
   var len=obj1.options.length;
//當(dāng)引用軟件列表長度等于1時(shí)返回，不做操作
   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];
//引用軟件被選中項(xiàng)不加入
if(i!=obj1.selectedIndex){
//克隆OPTION并添加到SELECT中
obj2.appendChild(option.cloneNode(true));
}
}

}

HTML代碼:

復(fù)制代碼代碼如下:

</select>
</td>
</tr>
<tr>
<td class="Search_item">退化構(gòu)件：</td>
<td class="Search_content" id="thgj">
<select name="thgjDm" style="width:160" id="thgjDm">
<option value="-1" selected>無</option>
</select>
</td>
</tr>
</TABLE>

您可能感興趣的文章: