背景：

點擊下載

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

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

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

 然后我們嘗試使用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");
    }
}

 從上述代碼你能夠判斷我們是試圖獲得組合框的文本框控制（它負責顯示選中值并為進一步的用戶代碼創建同樣的可用值。

 但是當我們在繼承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來執行同樣的任務，則可以用如下代碼：

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獲得控制。然后會發現所有TagName input控制都會出現在那個自定義控制中。現在我們運行一個循環來找到文本框并比較其值（無論它是否無效）。

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

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

組合框的列表框有內聯樣式表，包含position:absolute屬性。

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

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

在搜索后會發現組合框有如下內置供我們覆蓋：

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

為此我們用如下代碼：

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

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

 我們都知道，內聯樣式表有更高的優先級并省去了所有矛盾的屬性，它們最終被應用，最后的樣式屬性覆蓋所有值錢匹配的屬性。

 因此我們用!important規則，通過給樣式表指定更高的優先級來幫助覆蓋樣式表的內聯樣式屬性。