Asp.net 如何在顶部显示SelectionMode=“Multiple”的asp:ListBox中获取第一个选定项？

在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来解决这个问题。你的一些解决方案是什么

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

$(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');


});

我研究了JQuery，得出了以下结论：

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

---

但我认为我最喜欢@Cerburus的答案。

这有点笨拙，但我做过一次，希望有更好的解决方案

        //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);

---

这有点笨拙，但我做过一次，希望有更好的解决方案

        //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);

---

你想怎么称呼这个

从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;
    }
}

---

你想怎么称呼这个

从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;
    }
}

---

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

对于IE，我编写了一些在IE7上测试的jQuery代码：

$(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;
}

---

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

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

对于IE，我编写了一些在IE7上测试的jQuery代码：

$(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;
}

---

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

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

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上对我有效。

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

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。

我修改了代码，以便在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;
            }
        }
    });

---

我修改了代码，以便在IE和FF中获得一致的结果，使用scrollTo dependency for FF:

 $('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;
            }
        }
    });

---

我发现一行客户端jQuery代码就解决了这个问题。对于使用一个或多个选定选项到达客户端的多选列表框，请使用选择器的功能查找第一个选定选项。由于某些原因，仅仅调用焦点是不起作用的，但是将选定的元素重新设置为选定的元素将使其滚动到视图中

$(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');


});

---

我发现一行客户端jQuery代码就解决了这个问题。对于使用一个或多个选定选项到达客户端的多选列表框，请使用选择器的功能查找第一个选定选项。由于某些原因，仅仅调用焦点是不起作用的，但是将选定的元素重新设置为选定的元素将使其滚动到视图中

$(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');


});

---

当我将焦点带回firefox时，当我复制下一段代码时，我不小心按下了post按钮。很抱歉编辑以反映整个代码段。如何使对象在顶部可见？当我将焦点带回firefox时，在复制下一个代码段时，我不小心按下了post按钮。很抱歉编辑以反映整个片段。同样，OP希望所选项目位于列表框的顶部，而不知道所选项目是什么……是的，我想我对这个问题读得不够好+1对于大脑增益，OP希望所选项目位于列表框的顶部，而不知道所选项目是什么……是的，我想我对这个问题读得不够好+1对于大脑这不适用于最新版本的Chrome，Chrome似乎不会自动处理它。有没有关于修复的想法？对于Chrome，我发现如果我添加了选项[I]，这会起作用；在调用选项[i].focus；之前；。切换该值会导致Chrome将其滚动到视图中。这不适用于最新版本的Chrome，Chrome似乎不会自动处理该值。有没有关于修复的想法？对于Chrome，我发现如果我添加了选项[I]，这会起作用；在调用选项[i].focus；之前；。切换该值会导致Chrome将其滚动到视图中。