Question

在asp.net中如果你定义一个asp：ListBox如下：

<asp:ListBox ID="listBox2" runat="server" SelectionMode="Single" Rows="3">
  <asp:ListItem>1</asp:ListItem>
  <asp:ListItem>2</asp:ListItem>
  <asp:ListItem>3</asp:ListItem>
  <asp:ListItem>4</asp:ListItem>
  <asp:ListItem>5</asp:ListItem>
  <asp:ListItem>6</asp:ListItem>
  <asp:ListItem>7</asp:ListItem>
  <asp:ListItem Selected="True">8</asp:ListItem>
  <asp:ListItem>9</asp:ListItem>
  <asp:ListItem>10</asp:ListItem>
</asp:ListBox>

您将看到所选项目在顶部可见。但是，如果将其定义为多选列表框，则所选项目不可见，您必须向下滚动列表才能找到它们。

<asp:ListBox ID="listBox1" runat="server" SelectionMode="Multiple" Rows="3">
  <asp:ListItem>1</asp:ListItem>
  <asp:ListItem>2</asp:ListItem>
  <asp:ListItem>3</asp:ListItem>
  <asp:ListItem>4</asp:ListItem>
  <asp:ListItem>5</asp:ListItem>
  <asp:ListItem>6</asp:ListItem>
  <asp:ListItem>7</asp:ListItem>
  <asp:ListItem Selected="True">8</asp:ListItem>
  <asp:ListItem Selected="True">9</asp:ListItem>
  <asp:ListItem>10</asp:ListItem>
</asp:ListBox>

我已经做了一些谷歌搜索，并发现这不是一个不寻常的问题。但我没有找到任何好的解决方案，所以我想在这里问。

我的第一个想法是尝试一些JQuery来解决这个问题。您有哪些解决方案？

有些答案甚至不理解我的问题。我只关心确保第一个选定的选项可见。确保它滚动到视图中。

我玩了JQuery，并想出了以下内容：

<script type="text/javascript">
$(document).ready(function() {
   $("#listBox1 option:nth-child(8)").attr('selected',true);
 });
</script>

但我觉得我最喜欢@ Cerebrus的答案。

Answer 1

以下是我过去的表现。请注意，这会将视图滚动到列表框中的最后一项。

function FocusSelected()
{
  var lb = document.getElementById("listBox1");
  if (lb != null)
  {
    var options = lb.options;
    for (var i = options.length - 1; i > 0 ; i--)
    {
      if (options[i].selected == true)
      {
        options[i].focus();
        options[i].selected = true;
        return;
      }
    }
  }
}

它适用于IE 7和FF 3.0。

Answer 2

这有点笨拙，但我已经做了一次，并欢迎更好的解决方案。

        //get the selected value
        var selected = (from l in lstFilterUsers.Items.Cast<ListItem>()
                 orderby l.Value
                where l.Selected == true
                select l).Take(1);
        //get all the values except for that first selection
        var all = (from l in lstFilterUsers.Items.Cast<ListItem>()
                   where l != selected
                 orderby l.Value
                 select l);
        //create a temp array and fill it
        ListItem[] lic = new ListItem[lstFilterUsers.Items.Count];
        lic[0] = (ListItem)selected;
        int i = 1;
        foreach (var li in all)
        {
            lic[i++] = li;
        }
        //clear the listbox
        lstFilterUsers.Items.Clear();
        //readd the list
        lstFilterUsers.Items.AddRange(lic);

Answer 3

你打算怎么称呼这个？

来自Javascript：

<script type="text/javascript">

var myselect=document.getElementById("listBox1")
for (var i=0; i<myselect.options.length; i++){
    if (myselect.options[i].selected==true){
        alert("Selected Option's index: "+i)
        break;
    }
}

来自守则背后：

foreach (ListItem li in listBox1.Items)
{
    if (li.Selected)
    {
        return li;
    }
}

Answer 4

在我有限的实验中，Chrome和Firefox都会自动滚动。

对于IE，我把这个hacky的jQuery代码编写完毕（在IE7上测试）：

$(document).ready(function(){
    scrollToFirstSelection('select');       
});

function scrollToFirstSelection(query) {
    var select = $(query);
    var singleOption = select.find('option')[0];
    var heightOfSingleOption = select[0].offsetHeight / select.attr('size');
    var indexOfFirstSelection = select.find('option').index($('option[selected=true]:first'));
    select[0].scrollTop = heightOfSingleOption * indexOfFirstSelection;
}

如果你使用任何疯狂的填充或边距可能不准确，但它应该足够接近。

Answer 5

我修改了代码，以便在IE和FF 中获得一致的结果，使用了对FF的scrollTo依赖：

$('select').each(function () { var options = $(this).find('option'); for (var i = options.length - 1; i > 0; i--) { if (options[i].selected == true) { var x = options[i]; if (jQuery.browser.msie) { x.focus(); x.selected = true; } else { $(x).parents('select:eq(0)').scrollTo(x, 0); } return; } } });

Answer 6

我发现一行客户端jQuery代码解决了这个问题。对于使用一个或多个选定选项到达客户端的多选列表框，请使用选择器的功能查找第一个选定选项。出于某种原因，仅仅调用focus（）不起作用，但是再次将selected重置为selected会使它将所选元素滚动到视图中。

$(document).ready(function () {

  // Scroll to **FIRST** selected option in multi select list
  $("#lstCountries option:selected(:first)").focus().prop('selected', 'selected');

  // Scroll to **LAST** selected option in multi select list
  $("#lstStates option:selected").focus().prop('selected', 'selected');


});

如何在asp：ListBox中获得第一个选择的项目，SelectionMode =“Multiple”出现在顶部？

6 个答案: