Multiselect dropdown với hộp kiểm trong mvc4 dao cạo

Question

tôi đang làm việc trên dự án MVC4 nơi tôi có một lựa chọn thả xuống đa

@Html.DropDownList("year_selected", (SelectList)(ViewData["YearSelected"]), new { tabindex = "14", multiple = "multiple", style = "width:150px;height:200px;" }) 

của dân cư với danh sách năm tôi đã đề cập trong điều khiển

int minYear =Int32.Parse(Helper.MinYear); 
int maxYear = Int32.Parse(Helper.MaxYear); 
var yearSelectedList = new List<SelectListItem>(); 
for (int count = minYear; count <= maxYear; count++) 
{ 
    yearSelectedList.Add(new SelectListItem() 
    { 
     Text = count.ToString(), 
     Value = count.ToString() 
     }); 
    } 
    var yearselectlist = new SelectList(yearSelectedList, "Value", "Text"); 
    ViewData["YearSelected"] = yearselectlist; 

và trên thả xuống nhấp vào i am gọi jquery để chọn giá trị cụ thể đó và cũng khi trang được tải tôi kiểm tra giá trị được lưu trong cơ sở dữ liệu bằng cách chọn chúng theo mặc định

Đây là mã jquery để chọn các giá trị được lưu trong cơ sở dữ liệu

if (str_year_selected.val() != "") { 
    var yeararray = str_year_selected.val().split(","); 
    for (var i in yeararray) { 
     var val = yeararray[i]; 
     year_selected.find('option:[value=' + val + ']').attr('selected', 1); 
    } 
} 

và đây là mã tôi đang sử dụng để chọn giá trị khi người dùng nhấp chuột hoặc nhấn phím Ctrl trên thả xuống giá trị

year_selected.change(function() { 
    var selectedyears = ""; 
    $("#year_selected :selected").each(function (i) { 
     if (i != 0) { 
      selectedyears += ","; 
     } 
     selectedyears += $(this).text(); 
    }); 
    str_year_selected.val(selectedyears); 
}); 

Tất cả mọi thứ đang làm việc hoàn hảo. nhưng bây giờ vấn đề là người dùng muốn hộp kiểm bên trong thả xuống để có thể kiểm tra tùy chọn.

Làm cách nào để thực hiện việc này?

Answer 1

người dùng muốn hộp kiểm bên trong menu thả xuống để có thể kiểm tra tùy chọn.

Có một Plugin JQuery tuyệt vời được gọi là Dropdown Check List biến đổi phần tử HTML chọn thường xuyên thành danh sách hộp kiểm thả xuống.

Download

Answer 2

Thay vì sử dụng kéo xuống, bạn có thể sử dụng hộp kiểm trong div với css. Nó sẽ rơi xuống như nó là một danh sách thả xuống với hộp kiểm.

Dưới đây là liên kết tốt đẹp của jquery

http://www.erichynds.com/blog/jquery-ui-multiselect-widget

Answer 3

Liên kết này có hộp kiểm có trong DropDownList, tôi hy vọng liên kết này là phù hợp nhất cho câu hỏi của bạn. http://wenzhixin.net.cn/p/multiple-select/#setselects-getselects

Answer 4

Hướng dẫn này cho thấy bước hoàn thành bước hướng dẫn để tạo thả xuống multiselect với hộp kiểm trong MVC Multiselect dropdown with checkboxes in MVC

Bạn Cần Chọn Tag

<select id="CustomerId" name="CopyFromCustomerId"></select> 

hoặc bạn có thể sử dụng Html.ListBoxFor

Bạn cần tập lệnh sau

$('#CustomerId').multiselect({ 
      includeSelectAllOption: true 
     }); 

Và dưới đây css và kịch bản tập tin

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>  
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script> 
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>