表單元素之下拉系

這裡特指下拉框，select。但select有兩種形態，由multiple屬性決定。在多選形態下，使用者按住shift鍵就能實現多選，但用得不多，主要是佔空間。那我們著重說說單選形態及其結構。

下拉框是由多種元素組成，通常我們見過select套著option元素，這中間還能夾一層，optgroup就是對option元素進行分組。option元素裡面不能放置其他元素節點，option元素間除了空白或注釋節點，也不能放其他東西。

optgroup只是裝飾用，對提交資料沒有影響，當我們選中某個option元素時，它的selected屬性就變成true，之前被選中的元素的selected屬性變成false，select元素中selectedindex的值會變成被選元素的序號（它在所有option元素的位置）。此外，還有乙個鮮為人知的屬性selectedoptions，它是對應乙個陣列，裝著被選中的元素，那麼它就換成被選中元素。因此dom操作是一種非常複雜與高消耗的行為，這導致基於虛擬dom的react庫的誕生。減少不必要的dom操作，就能大幅提高效能。

select的值就是被選中的option元素的值，如果使用者定義value屬性，那麼這值就是option.value，否則就是option的innerhtml，也就是option.text。這當中存在相容問題，比如有的瀏覽器會對innerhtml進行兩端空白trim操作，有的不會，建議統一使用trim操作。

volvosaabopelaudi

option.value的提取方法如下：

//by 司徒正美
var roption = /^]+))?)*\s+value[\s=]/i
var valhooks =  : function (node) 
}

//by 司徒正美
select.innerhtml = '1';

執行發現標準瀏覽器如chrome， firefox執行正常，dom樹為

ie(678)全家都呵呵了：

原因在於ie使用innerhtml給select賦值時會根據/^&/(尖括號中間的字母、數字，引號，空格)匹配的字元都乾掉，無力吐槽。

我們先來看看option構造器是怎麼用的

//by 司徒正美 new option(text,value,defaultselected,selected) /*text:字串，指定option物件的text屬性(即之間的文字) value:字串，指定option物件的value屬性 defaultselected:布林值，指定option物件的defaultselected屬性返回下面selected的預設值 selected:布林值，指定option物件的selected屬性 ture/false 是否選擇

*/

除了第乙個引數，其他都是可選的，相當於

//by 司徒正美
var option =  document.createelement("option")
option.text = "***x"
option.value = "aaa"
option.selected = true

再看options.add方法。options是select元素的乙個陣列屬性，裡面裝著所有option元素。add是其上面的乙個方法( ie中它也能出現在select元素上)，此方法存在相容問題。

var objselect = document.getelementbyid('myselect'); 
//新增乙個選項 
objselect.add(new option("文字","值")); //這個只能在ie中有效 
objselect.options.add(new option("text","value")); //這個相容ie與firefox

options.add有兩種傳參方式，第一種要來傳入兩個元素，第乙個是新option元素，第二個是已有的option元素，新元素會插入到舊元素之前。問題出現在第二個引數預設的情況下:

objselect.add(new option("label", "value"), null);

請注意，在ie6及ie7下請使用不帶null引數的add方法，在ff下請使用帶null引數的方法，ie8下帶不帶都可以。很奇怪為什麼一定要加null，我猜測add方法裡一定使用了'=== null'來判斷第二的引數或者沒有對引數陣列的長度做驗證。

還有一種傳參方法，第乙個是新option元素，第二個是插入位置，不寫預設插入到末尾。

objselect.add( new option(txt, val)); //加在末尾
objselect.add( new option(txt, val)，0);//加在開頭

早期ie是不支援傳入兩個元素，只支援傳入元素與插入位置的方式。ie8是兩種方式都支援，對於普通瀏覽器,如果傳入的是索引數值,它不會認為是出錯,還是會新增在最後。

onetwo three four click me!

這是標準dom api，基本上無所不能。在以前的ie4中, document只能建立img, area, option三種元素，到了ie5，一般可以程式設計建立幾乎所以元素，除了frame和iframe。而且這些新的建立的元素的屬性都是可讀寫的，並且可以程式設計隨意訪問。但是你必須得先把他們先回到他們相應的集合中或者當前文件中你才能使用, 否則會報錯。

看下乙個課題，如何找到可以提交的option元素。因為決定乙個option能否提交，除了selected屬性外，還有disabled屬性，由於disabled屬性可能出現在select或optgroup元素上，這問題就複雜了。此外selectedoptions陣列屬性並不可靠，不是所有瀏覽器都支援。jquery在處理這裡也花了不少**。

var valhooks = ,
"select:get": function (node, value) 
//收集所有selected值組成陣列返回
values.push(value)}}
return values}}

option還有兩個重要的屬性，index是返回當前option元素在此select下所有option元素的位置。label是顯示其文字，行為有點像text，優化級比text高，但有點相容性問題。

textcontent1textcontent2

textcontent1textcontent2

通常情況下，ie,opera,safari是顯示label1與label2，而chrome, firefox(即使是4.01的版本)是顯示textcontent1與textcontent2，這個古老的bug（見這裡）至今沒修復。

表單元素之下拉系

HTML表單元素

form表單元素

html表單元素

表單元素之下拉系

HTML表單元素

form表單元素

html表單元素

相關推薦