2011-01-20 145 views
1

我有一個多選列表框。該列表框包含許多實體的名稱。大約1000+。所以你可以看到,滾動瀏覽會非常煩人。我想要做的是在垂直方向上顯示A-Z。當用戶點擊一個字母時,會觸發javascript來設置所選第一個出現字符的滾動位置(不選擇該項目)。這是一個在C#中創建的控件,並且使用客戶端腳本管理器呈現JavaScript。基本上我到目前爲止所做的是從字符數組A-Z中添加一個新的htmlanchor。這將垂直列出字母。這將非常類似於iTouch/iPhone音樂庫,觸摸/單擊該字母並將滾動設置爲第一次出現。我知道如何遍歷列表。到目前爲止,我有充當這樣一個onclick函數:設置列表框的滾動位置

private HtmlGenericControl alphaSortContainer; 
this.alphaSortContainer = new HtmlGenericControl("div"); 
char[] alphabet = { 'Z'.......'A' }; 
for (int i = 0; i < 26; i++) 
{ 
    var letter = new HtmlAnchor(); 
    link.InnerText = alphabet[i].ToString(); 
    link.Attributes.Add("onclick", "javascript:jumpToIndex('" + link.InnerText + "');"); 
    alphaSortContainer.Controls.Add(letter); 
} 

上面的代碼添加(或應當)字母堆疊在彼此的頂部上。他們的onclick會觸發JavaScript函數併發送信函。

我到目前爲止的javascript:

function jumpToIndex(var index) { 
    var list = document.getElementByID('" + this.list.ClientID + "'); 
    for(var i=0; i < list.length; i++) { 
     if(list.options[i].value.charAt(0) == index) { 
      HOW TO SET THE SCROLL POSITION TO MAKE THAT OBJECT THE TOP OF THE LIST BOX 
      break; //pretty sure this is how i would break out of both loops. 
     } 
    } 
} 

我只需要滾動到if語句相匹配的項目。此外,我很確定這將是我如何擺脫兩個循環。請幫忙!

回答

1

做到這一點的唯一方法是選擇在選擇列表中的選項,你可以做以下的方法之一:

<select id="myselect"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3" selected="selected">3</option> 
    <option value="4">4</option> 
</select> 

當然,如果你不想做出這樣的選擇服務器端在生成列表,或者如果你建立的名單客戶方,你總是可以做使用它的JavaScript這樣的:

document.getElementById('myselect').options[<insert number>].selected = true; 

,記住<insert number>是zerobased

現在在您說我不想選擇它之前,只需滾動到它,請記住,如果您在列表框中看到一個選項,則默認情況下它已被選中。

除非您使用的是多選選擇框在這種情況下,這是一個完全不同的球賽的工作,你是狗屎運氣不好;)

+0

該死的......看起來我很糟糕哈哈。我正在考慮搜索列表,選擇第一個出現,滾動到它,然後取消選擇它。但是,在意識到我的列表大約是24k +之後,它會非常慢。我能做到這一點的唯一方法是以某種方式將其他地方的第一個事件存儲起來(列表來自SQL)。最大的問題是客戶認爲這是可行的。 25K +列表框,高度爲100px ....是的。 – Tom 2011-01-20 20:43:10

0

你有沒有考慮未顯示整個清單,但具有JavaScript數組每封信。當選擇一封信時,該列表中只填寫了該字母的項目?

var alphalist=new Array(); 
alphalist['a']=new Array('aardvark','acorns','apples'); 
alphalist['b']=new Array('baby','barley'); 
//etc 
function fill_list{selectedLetter){ 
    listItems=alphalist[selectedLetter]; 
    mylist=document.getElementById('mylist'); 
    mylist.length=0;.length=0; 
    for(var i=0;i<listItems.length;i++){ 
    optionName = new Option(listItems[i],listItems[i]) 
    var length = mylist.length; 
    mylist.options[length] = optionName; 
    } 
}