基於選定列表的排序列表框

Question

我想根據我的下拉列表的選定值對列表框進行排序， 有沒有辦法用Jquery或Javascript做到這一點？

這是我的看法列表框中選擇的列表：

<select id="sel2"> 
 
<option value="">Todos</option> 
 
<option value="COMIDAS">COMIDAS</option> 
 
<option value="DESAYUNOS">DESAYUNOS</option> 
 
<option value="CENAS">CENAS</option> 
 
</select> 
 

 
<select id="Group" multiple="multiple" name="Group" style="width: 300px;"> 
 
<option>{ Turno = CENAS, Total = $57,410.00 }</option> 
 
<option>{ Turno = COMIDAS, Total = $151,571.00 }</option> 
 
<option>{ Turno = DESAYUNOS, Total = $58,994.00 }</option> 
 
</select> 
 
             

我的列表框填充頁面加載之前在服務器端通過Viewbag

ViewBag控制器上：

foreach (var item in db.Pos.Where(r => r.Fecha.Day <= today.Day).Select(v => new { Rid = v.Rid, Total = v.Total }) 
.GroupBy(l => l.Rid).AsEnumerable().Select(z => new {Turno=z.Key, Total = String.Format("{0:$#,##0.00;($#,##0.00);Zero}",Decimal.Round(z.Sum(l => l.Total), 0))})) 
     { 

      listadesumas.Add(item.ToString()); 
      //listadesumas.Add(Selected);   
     } 

     var grupos = new SelectList(listadesumas.ToList()); 
     ViewBag.Group = grupos; 

Viewbag上查看：

@Html.ListBox("Group", (IEnumerable<SelectListItem>)ViewBag.Group, new { style = "width: 300px;" }) 

Answer 1

使用jQuery基於第一個下拉選擇

$('#sel2').change(function(e) { 
     $("#Group").html($('#Group').sort(function(x, y) { 
      return $(x).val() == $("#sel2").val() ? 1 : -1; 
     })); 
     $("#Group").get(0).selectedIndex = 0; 
     e.preventDefault(); 
    }); 

你也將需要從第一個下拉添加相同的值，以第二的下拉列表進行排序因爲我看到你的第二個下拉列表沒有任何值。

Answer 2

使用JQuery或JavaScript，在您的下拉列表上設置更改事件處理程序。

在事件處理程序中，檢查選定的值並使用條件語句重新排列列表框中的項目。

Here is an example of how to set an event handler for a drop-down list using JQuery.

Here is an example of how to sort the contents of a select box.