3

我的应用程序中有一个列表框，效果很好。但是要进行多项选择，我需要按 ctrl 并单击该项目。我怎样才能改变这种行为，所以每次我点击列表中的项目时，它都会选择它，当再次按下它时，它会取消选择但只有一个选定的项目。

我的列表框：

@Html.ListBoxFor(m => m.selectedCharts, new SelectList(@Model.Graphs.ToList() )
                                                    , new { @class = "select_change" }
                )

或者也许我应该为此目的使用不同的控制？

非常感谢

4

2 回答 2

5

我以前使用过Bootstrap Multiselect，取得了巨大的成功。

如果它不能是下拉列表，请改用此复选框列表。

于 2013-08-04T18:23:03.290 回答
1

我设法完成了一个漂亮的列表框，用户不需要按 ctrl 按钮来选择多个元素。我想和你分享我的工作。我使用了 MartinHN 建议的一个惊人的扩展 CheckBoxListFor。你可以在这个网站MvcCheckBoxList上找到它。

我的查看代码 

    @{
  var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 0 , new { @class="styled_list" });
                        @Html.CheckBoxListFor(model => model.ReportSettings.Ids,
                                              model => model.AvailableGraphs,
                                              graph => graph.Id,
                                              graph => graph.Name,
                                              model => model.SelectedGraphs,
                                              new { @class="styled_checkbox" },
                                              htmlListInfo, 
                                              null, 
                                              x => x.Name)
        }

我的 CSS：

input.styled_checkbox, input[type="checkbox"] 
  {
     visibility: hidden;
     width: 0px;
  }
.styled_list 
{
    background: #aeeefb;
    border-radius:5px;
    padding: 10px 10px 10px 0;
    color: White;
    font-weight: bold;   
}  
.styled_checkbox 
{
    background: #69D2E7;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    margin: 3px 0 3px 0;
    padding: 5px;
    position: relative;
    width: 250px;
    border-radius:5px;
}
.styled_checkbox:hover
{
    opacity: 0.7;
}
.styled_checkbox:checked+label
{
     background: #1a9eed;  
}

复选框被隐藏，标签指示元素是否被选中。我无法插入图片，但它看起来不错，但您当然可以根据自己的需要编辑样式。

希望对任何人都有帮助

于 2013-08-07T11:06:20.440 回答