Як отримати перший вибраний елемент в осі: ListBox з SelectionMode = "Кілька", щоб з'явитись вгорі? - asp.net, html, веб-форми

Якщо на 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>

Але, мені здається, мені найбільше подобається відповідь @Cerebrus.

Відповіді:

4 для відповіді № 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.

---

0 для відповіді № 2

Як ти хочеш це назвати?

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

---

0 для відповіді № 3

Це трохи незграбно, але я зробив це один раз і радий кращого рішення.

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

---

0 для відповіді № 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;
}

Можливо, це буде неточно, якщо ви використовуєте якісь божевільні відступи або поля, але це повинно бути досить близько.

---

0 для відповіді № 5

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

---

0 для відповіді № 6

Я виявив, що один рядок 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");


});

---