背景:
點擊下載ComboBoxValidation
工作中可能會出現必須用AJAX ComboBox(組合框)取代ASP.NET的下來列表控制。使用組合框,一切運作良好,直到開始校驗它,然後我們嘗試用chrome提供的開發者工具調試,由此得知組合框是如何形成的。基本上是由以下三個控制組成:
TextBox(文字方塊)
Button(按鈕)
ListBox(列錶框)
起初列錶框控制都是隱藏的,當我們點擊按鈕提供下拉式選單效果時它才顯示。
然後我們嘗試使用JavaScript並傳送組合框客戶ID給JavaScript並檢查其值,依然不能校驗組合框,因為我得到了無效值異常。
在使用一些試用方法,我們即獲得一個解決方案,所用
function validateCombobox() {
var comboboxId = document.getElementByBox(' alert(comboboxId.value);
value");
}
}
從上述代碼你能夠判斷我們是試圖取得組合方塊的文字方塊控制(它負責顯示選取值並為進一步的使用者程式碼建立相同的可用值。
if (comboboxId.value != null && comboboxId.value != "") {
alert("null value");
}}
這才是真正的問題。 >');
var inputs = id.getElementsByTagName('input');
var i;
for (i= 05; if (inputs[i].type == 'text ') {
else break;
}}
}
在上述程式碼中你可以看到我們在JavaScript中使用其客戶ID控制。然後會發現所有TagName input控制都會出現在那個自訂控制中。現在我們運行一個循環來找到文字方塊並比較其值(無論它是否無效)。
同樣地,你可以檢查你想要在客戶端用JavaScript處理組合框的其它值或任務。
在解決這個之後,會看到一個新的問題——當在一個div位置屬性使用它時,我們看到列錶框不在組合框的文字框控制下。在搜尋之後我們得知問題在於div包含含有位置屬性的組合方塊。因此當我們移除位置屬性,一切都運作正常了。
組合框的列錶框有內嵌樣式表,包含position:absolute屬性。
但為了設定頁面佈局,有必要使用位置屬性。
之後我們發現,如果能夠從absolute到fixed覆寫位置屬性,任務就能完成。我們可以為相同的目的用position:static。
在搜尋後會發現組合框有如下內建供我們覆蓋:
.ajax__combobox_inputcontainer
.ajax__combobox_textboxcontainer
.ajax__
.combo{
//your style}
.combo .ajax__combobox_itemlist{ .combo .ajax__combobox_itemlist{
position 覆蓋項目清單類別的位置屬性。
我們都知道,內聯樣式表有更高的優先權並省去了所有矛盾的屬性,它們最終被應用,最後的樣式屬性覆蓋所有值錢匹配的屬性。
因此我們用!important規則,透過給樣式表指定更高的優先權來幫助覆蓋樣式表的內聯樣式屬性。