首頁 > 開發者 > JavaScript

js select option對象小結

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

js select option對象小結

 本篇文章主要是對js中的select option對象進行了總結介紹，需要的朋友可以過來參考下，希望對大家有所協助

一基礎理解: 

 

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> 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
html select option link javascript html select option php select option selected javascript create select option php html select option php input select option php select option
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More