js select option對象小結

2019-11-20 21:25:25

字體：大中小

來源：轉載

供稿：網友

一基礎理解:

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代碼:

復制代碼代碼如下:

</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>