Как получить первый выбранный элемент в asp: ListBox с SelectionMode = "Multiple", чтобы появиться вверху?

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>

Я немного поискал в Google и вижу, что это не редкая проблема. Но я не нашел хороших решений, поэтому подумал, что я попрошу здесь.

Моей первой мыслью было попробовать JQuery, чтобы решить эту проблему. Каковы некоторые из ваших решений?

Некоторые из ответов даже не понимают мою проблему. Меня интересует только то, чтобы первый выбранный вариант был виден. Убедитесь, что он прокручивается в поле зрения.

Я поиграл с JQuery и придумал следующее:

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

Но я думаю, что мне больше всего нравится ответ @ Церебра.

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

Я обнаружил, что одна строка клиентского кода jQuery решает эту проблему. Для списка с множественным выбором, который поступает на клиент с одной или несколькими выбранными опциями, используйте силу селекторов, чтобы найти первую выбранную опцию. По какой-то причине простой вызов focus () сам по себе не работает, но при сбросе выбранного к выбранному снова будет прокручиваться выбранный элемент на экране.

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


});

Answer 3

Я изменил код, чтобы получить согласованный результат в IE и FF , используя зависимость scrollTo для 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;
            }
        }
    });

Answer 4

В моих ограниченных экспериментах, Chrome и Firefox выполняют прокрутку автоматически.

Для IE я приготовил этот хакерский код 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

Как ты это называешь?

Из 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 6

Это немного неуклюже, но я сделал это однажды и приветствовал бы лучшее решение.

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