背景：

點(diǎn)擊下載

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

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

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

 然后我們嘗試使用JavaScript并傳送組合框客戶ID給JavaScript并檢查其值，依然不能校驗(yàn)組合框，因?yàn)槲业玫搅藷o(wú)效值異常。

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

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)我們?cè)诶^承masterpage的頁(yè)面使用它，然后HTML就不一樣了，這個(gè)方法就不夠可靠了。你可以通過查看你的源代碼來(lái)核實(shí)。因此我們的function需要如下改變：

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

這才是真正的問題。若不想寫兩個(gè)不同的functio來(lái)執(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;
        }
    }
}

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

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

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

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

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

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

在搜索后會(huì)發(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)建了一個(gè)類名稱組合以便覆蓋項(xiàng)目列表類的位置屬性。

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

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