2011-01-20 104 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; 
    } 
}