背景：

點擊下載

工作中可能會出現(xiàn)必須用AJAX ComboBox（組合框）替代ASP.NET的下來列表控制。使用組合框，一切運行良好，直到開始校驗它，然后我們嘗試用chrome提供的開發(fā)者工具調(diào)試，由此得知組合框是如何形成的。基本上是由如下三個控制所組成：

• TextBox（文本框）
• Button（按鈕）
• ListBox（列表框）

起初列表框控制都是隱藏的，當(dāng)我們點擊按鈕以提供下拉菜單效果時它才顯示。

 然后我們嘗試使用JavaScript并傳送組合框客戶ID給JavaScript并檢查其值，依然不能校驗組合框，因為我得到了無效值異常。

在使用一些試用方法，我們即獲得一個解決方案，所用代碼如下：

function validateCombobox() {
    var comboboxId = document.getElementById('<%=ComboBox1.ClientId%>_TextBox');
    if (comboboxId.value != null && comboboxId.value != "") {
        alert(comboboxId.value);
    }
    else {
        alert("null value");
    }
}

從上述代碼你能夠判斷我們是試圖獲得組合框的文本框控制（它負(fù)責(zé)顯示選中值并為進(jìn)一步的用戶代碼創(chuàng)建同樣的可用值。

但是當(dāng)我們在繼承masterpage的頁面使用它，然后HTML就不一樣了，這個方法就不夠可靠了。你可以通過查看你的源代碼來核實。因此我們的function需要如下改變：

function validateCombobox() {
    var comboboxId = document.getElementById('<%=ComboBox1.ClientId%>_ComboBox1_TextBox');
    if (comboboxId.value != null && comboboxId.value != "") {
        alert(comboboxId.value);
    }
    else {
        alert("null value");
    }
}

這才是真正的問題。若不想寫兩個不同的functio來執(zhí)行同樣的任務(wù)，則可以用如下代碼：

function validateCombobox() {
    var id = document.getElementById('<%=ComboBox1.ClientID %>');
    var inputs = id.getElementsByTagName('input');
    var i;
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'text') {
            if (inputs[i].value != "" && inputs[i].value != null)
                alert(inputs[i].value);
            else
                alert("null value");

            break;
        }
    }
}

在上述代碼中你可以看到我們在JavaScript中用其客戶ID獲得控制。然后會發(fā)現(xiàn)所有TagName input控制都會出現(xiàn)在那個自定義控制中。現(xiàn)在我們運行一個循環(huán)來找到文本框并比較其值（無論它是否無效）。

同樣地，你可以檢查你想要在客戶端用JavaScript處理組合框的其它值或任務(wù)。

在解決這個之后，會看到一個新的問題——當(dāng)在一個div位置屬性使用它時，我們看到列表框不在組合框的文本框控制下面。在搜索之后我們得知問題在于div包含含有位置屬性的組合框。因此當(dāng)我們移除位置屬性，一切都運轉(zhuǎn)正常了。

組合框的列表框有內(nèi)聯(lián)樣式表，包含position:absolute屬性。

但為了設(shè)置頁面布局，有必要使用位置屬性。

之后我們發(fā)現(xiàn)，如果能夠從absolute到fixed覆蓋位置屬性，任務(wù)就能完成。我們可以為同一的目的用position:static。

在搜索后會發(fā)現(xiàn)組合框有如下內(nèi)置供我們覆蓋：

• .ajax__combobox_inputcontainer 
• .ajax__combobox_textboxcontainer
• .ajax__combobox_buttoncontainer
• .ajax__combobox_itemlist

為此我們用如下代碼：

.combo{
//your style 
     }
   .combo .ajax__combobox_itemlist{
   	position : static !important;
      }

在上述代碼中我們已經(jīng)創(chuàng)建了一個類名稱組合以便覆蓋項目列表類的位置屬性。

我們都知道，內(nèi)聯(lián)樣式表有更高的優(yōu)先級并省去了所有矛盾的屬性，它們最終被應(yīng)用，最后的樣式屬性覆蓋所有值錢匹配的屬性。

因此我們用!important規(guī)則，通過給樣式表指定更高的優(yōu)先級來幫助覆蓋樣式表的內(nèi)聯(lián)樣式屬性。