select 下拉菜單Option對象使用add(elements,index)方法動態添加


原生js 的add函數為下拉菜單增加選項

1.object.add(oElement [, iIndex])

index 可選參數:
指定元素放置所在的索引號,整形值。如果沒有指定值,將添加到集合的最后。 
想加到最前面,指定索引值0就可以了。

@@注意:

  add方法為js原生方法,屬於element元素對象,在使用jquery對象獲取元素時是不可用的

  var select = $('#select');

           select.add(new Option(txt,val))

提示:undefined add function()

var obj = document.getElementById('select');

obj.options.add(new Option(txt,val));

正確

var objSelect=document.getElementById("select");
objSelect.options.add( new Option(txt, val));
或直接寫
objSelect.add( new Option(txt, val)); //加在末尾
objSelect.add( new Option(txt, val),0);//加在開頭 
根據index 選擇加載的地方

2.Option對象

  創建一個Option對象 options = new Option('文本','value');

  在<select>標簽中創建一個或多個<option value="值">文本</option>
  options是個數組,里面可以存放多個<option value="值">文本</option>這樣的標簽

屬性:一、option[]數組的屬性

    1.length屬性---------長度屬性

      select.options.length  

   2.selectedIndex屬性--------當前被選中的框中的文本的索引值,        此索引值是內存自動分配的(0,1,2,3.....)對應(第一個文本值,第二個文本值,第三個文本值,第四個文本值..........)

    objSelect.options.[obj.selectedIndex].value

    二、單個option的屬性(obj.options[obj.selecedIndex]是指定的某個<option>標簽,是一個)

    @1.text屬性---------返回/指定 文本
    @2.value屬性------返回/指定 值,與<options value="...">一致。
    @3.index屬性-------返回下標,
    @4.selected 屬性-------返回/指定該對象是否被選中.通過指定 true 或者 false,可以動態的改變選中項
    @5.defaultSelected 屬性-----返回該對象默認是否被選中。true / false。

option方法:

  1.增加一個<option>標簽  obj.options.add(new("文本","值"));

  通過元素增加option選項

  var options= document.createElement("option");
  options.value='22';
  options.innerText = 'huanying';
  select.options.add(options);

  2.刪除一個<option>標簽      obj.options.remove(obj.selectedIndex)

  刪除當前選擇的元素       var select =document.getElementById('sele');  select.options.remove(select.options.selectedIndex);  var index=obj.selectedIndex; 被選中項

  刪除指定index的元素    obj.options.remove(index);             例如:select.options.remove(3);  

  3.獲得一個<option>標簽的文本  obj.options[obj.selectedIndex].text

    select.options[2].text  取得索引為2的元素的文本值

    select.options[2].value  取得索引為2的元素的value值

  4.修改一個<option>標簽的值    obj.options[obj.selectedIndex]=new Option("新文本","新值")

    select.options[2]= new Option('日本','6');

    obj.options[index].selected = true; //保持選中狀態 

  5.刪除所有<option>標簽      obj.options.length = 0

刪除select標簽

  @1.var select =document.getElementById('sele');

    select.parentNode.removeChild(select);    //移除當前對象 

添加select標簽

  var mySelect = document.createElement_x("select"); 
  mySelect.id = "mySelect"; 
  document.body.appendChild(mySelect); 

刪除所有options選項

  objselect.options.length= 0;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM