Как да се получи първият избран елемент в asp: ListBox с SelectionMode = "Multiple", за да се появи в началото? - asp.net, html, webforms

В 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 от страна на клиентакод решава този проблем. За списък с много селекции, който пристига при клиента с една или повече избрани опции, използвайте силата на селекторите, за да намерите първата избрана опция. По някаква причина просто извикването на фокуса () само по себе си не работи, но нулирането отново на избраното отново ще го превърти избрания елемент в изглед.

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


});

---