基于选定列表的排序列表框

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.