使用asp.net mvc4选择2多选列表,不带搜索字段

时间:2014-06-15 03:22:49

标签: asp.net-mvc-4 jquery-select2

enter image description here enter image description here在此处输入图片说明enter image description here我一直试图让它工作一段时间但不能。我需要一个Select2多选下拉列表(无搜索字段)。当用户在该下拉列表中单击时,这应显示MVC5 Controller操作的值列表。但我不能让这个工作。这是我的View,Controller和JavaScript文件。任何帮助,将不胜感激 编辑:此外,我试图从控制器传递回Javacsript的数据创建选择列表

编辑:请参阅附件中的图片

- 查看

@Html.HiddenFor(m => m.Id, new { id = "hidden-select2-setup", placeholder = "Please select an Owner", value = "000", style = "width:100%;" })
                <input type="text" class="hidden" id="make" name="Makes" value="@Model.Owners" />

- 控制器

[HttpPost]
        public JsonResult GetAllAutos(int id= 0)
        {
            var result = Automobile.GetAll();
            var makes = result.Owners.Select( o => new {
            text = o.Name,
            id = o.Id             
            }).ToList();
            return Json(makes);
        }

- POCO

public class Automobile
    {
        public int Id { get; set; }
        public string Make { get; set; }
        public string Model { get; set; }
        public List<Owner> Owners { get; set; }
        public int? OwnerId { get; set; }
        public static Automobile GetAll()
        {
            var auto = new Automobile();
            var ownerList = new List<Owner>
            {
                new Owner{Id = 1,Name="Carlos Joseph"},
                new Owner{Id = 2,Name="Bradley Cooper"},
                new Owner{Id = 3,Name="Brad Pitt"},
                new Owner{Id = 4,Name="Johnny Depp"}
            };

            auto.Owners = ownerList;
            return auto;
        }

    }
    public class Owner
    {
        public int? Id { get; set; }
        public string Name { get; set; }

    }

- Javacsript文件:

$("#hidden-select2-setup").select2({
    placeholder: "Type to find a Contract",
    allowClear: true,
    allowMultiple: true,
    ajax: {
        cache: false,
        dataType: "json",
        type: "POST",
        url: "/Automobile/GetAllAutos/1",
        results: function (data) { 
            return { results: data };

        }
    },
    formatResult: contractFormatResult,
    formatSelection: contractFormatSelection,
    escapeMarkup: function (m) { return m; }
});


function contractFormatResult(contract) {    
    $('#hidden-select2-setup')
        .append($('<option></option>')
        .attr('value', contract.id)
        .text(contract.text))
    return $('#hidden-select2-setup');
}

function contractFormatSelection(contract) {
    return contract.name;
}

1 个答案:

答案 0 :(得分:0)

有几种方法可以禁用搜索框:

1:

$('#selectId').select2({
    minimumResultsForSearch: -1
});

2:

$('.select2-search, .select2-focusser').remove();

3:

.no-search .select2-search {
    display:none
}

$('#selectId').select2({
    dropdownCssClass : 'no-search'
});