Come ottenere la prima voce selezionata in un asp: ListBox con SelectionMode = "Multiple" per apparire in alto? - asp.net, html, webforms

In asp.net se si definisce un asp: ListBox come segue:

<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>

Vedrai che l'elemento selezionato è visibile in alto. Ma se lo definisci come una casella di riepilogo di selezione multipla, gli elementi selezionati non sono visibili e devi scorrere l'elenco per trovarli.

<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>

Ho fatto un po 'di ricerche su Google e ho visto che questo non è un problema insolito. Ma non ho trovato nessuna buona soluzione, quindi ho pensato di chiedere qui.

Il mio primo pensiero è stato quello di provare un po 'di JQuery per risolvere questo problema. Quali sono alcune delle tue soluzioni?

Molte delle risposte non capiscono nemmeno il mio problema. Mi interessa solo garantire che la prima opzione selezionata sia visibile. Assicurati che sia visualizzata.

Ho giocato con JQuery e ho pensato a quanto segue:

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

Ma penso che mi piace la risposta di @Cerebrus al meglio.

risposte:

4 per risposta № 1

Ecco come l'ho fatto in passato. Si noti che questo scorre la vista fino all'ultimo elemento nella casella di riepilogo.

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

Funziona per me su IE 7 e FF 3.0.

---

0 per risposta № 2

Come stai cercando di chiamarlo?

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

Dal codice dietro:

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

---

0 per risposta № 3

È un po 'goffo, ma l'ho fatto una volta, e accolgo con favore una soluzione migliore.

        //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 per risposta № 4

Nella mia sperimentazione limitata, sia Chrome che Firefox eseguono lo scorrimento automaticamente.

Per IE, ho cucinato questo frammento di codice jQuery (testato su 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;
}

Potrebbe non essere esatto se si utilizzano imbottiture o margini folli, ma dovrebbe essere abbastanza vicino.

---

0 per risposta № 5

Ho modificato il codice in modo da ottenere risultato coerente sia in IE che in FF, usando scrollTo dipendenza per 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 per risposta № 6

Ho trovato quella riga di jQuery sul lato clientil codice risolve questo problema. Per una casella di riepilogo a selezione multipla che arriva al client con una o più opzioni selezionate, utilizzare la potenza dei selettori per trovare la prima opzione selezionata. Per qualche ragione, semplicemente chiamare focus () da solo non funziona, ma reimpostare il selezionato su nuovamente selezionato farà quindi scorrere l'elemento selezionato in vista.

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


});

---