Question

此代码不允许我选择多个项目，如何调整它以便它可以？如何调用多个选定的项目？同样的方式还是新的方式？我担心的另一件事是下拉列表的设计，是否可以下拉复选框项目列表？但这是可选的。

部分视图

@model Website_Design.Models.Models


@{
    var x = Model.Stuff.Countries[0].Text;
    <p>@x</p>
}

索引视图：

@model Website_Design.Models.Models

  <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>


@{
using (Html.BeginForm())
{

    <div class="row">
        <div class="form-group">
            @Html.LabelFor(m => m.Stuff.CountryId, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.DropDownListFor(m => m.Stuff.CountryId, Model.Stuff.Countries, new { @class = "form-control" })
            </div>
        </div>
    </div>


}
<input type="button" value="Battle" id="battleButton" />

}

<!--THREE-->
<div id="pvDiv1"></div>

<script>
var Battle = '@Url.Action("Battle", "Home")';
//MVC FUNCTIONS
$(document).ready(function() {
    $('#battleButton').click(function() {

        $.ajax({
            type: 'POST',
            url: Battle,

            //data: $('form').serialize() + '&' + $.param({ a: P1, b: P2 }),
            data: $('form').serialize(),
            success: function(result) {
                $('#pvDiv1').html(result);
            }

        });
    });
});

控制器：

 public ActionResult Index(Models model)
    {

        model.Stuff = new Stuff();

        return View(model);
    }

型号：

public class Stuff
{
    public int CountryId { get; set; }
    public List<SelectListItem> Countries
    {
        get
        {
            return new List<SelectListItem>{
                                                   new SelectListItem{
                                                                             Text="India",
                                                                             Value = "1"
                                                                         },
                                                   new SelectListItem{
                                                                             Text="USA",
                                                                             Value = "2"
                                                                         },
                                                   new SelectListItem{
                                                                             Text="USA2",
                                                                             Value = "3"
                                                                         },
                                                   new SelectListItem{
                                                                             Text="US3",
                                                                             Value = "2"
                                                                         }
                                               };
        }
    }
}

Answer 1

DropDownListFor助手无法创建多选列表。它只会创建常规<select>下拉框。

在HTML中，创建允许多项选择的选择框的唯一“本机”方式是使用带有<select>属性的multiple元素，如下所示：

<select multiple="multiple">
 ....
</select>

有一个名为ListBoxFor

的辅助方法

关于设计，你真的无法改变太多。如果您希望下拉列表显示复选框，那么您运气不好 - 您必须使用CSS / Javascript自行推送。

这里有关于ListBoxFor助手的更多信息： How do you properly create a MultiSelect <select> using the DropdownList helper?

下拉不允许MVC5中的多个选定值

1 个答案: