web-dev-qa-db-fra.com

Menu déroulant multisélection avec cas à cocher dans mvc4

Je travaille sur le projet MVC4 où j'ai un menu déroulant à plusieurs sélections

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

Son peuplé avec la liste des années que j'ai mentionnées dans le contrôleur

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;

et dans la liste déroulante, cliquez sur J'appelle jQuery pour sélectionner cette valeur particulière, ainsi que lorsque la page est chargée.

Voici le code jQuery pour sélectionner les valeurs qui sont enregistrées dans la base de données

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);
    }
}

et voici le code que j'utilise pour sélectionner la valeur lorsque l'utilisateur clique ou appuie sur la touche Ctrl sur les valeurs déroulantes

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

Tout fonctionne parfaitement. mais maintenant, le problème est que l'utilisateur veut une case à cocher dans la liste déroulante pour pouvoir cocher l'option.

Comment puis-je faire cela ?

jqueryjquery-uiasp.net-mvc-4
8
Mahajan344

l'utilisateur veut une case à cocher dans la liste déroulante pour pouvoir cocher l'option.

Il existe un fantastique plugin JQuery appelé Dropdown Check List qui transforme un élément HTML de sélection classique en une liste à cocher déroulante.

enter image description here

Télécharger

6
Abbas Amiri

Plutôt que d'utiliser la liste déroulante, vous pouvez utiliser la case à cocher dans div avec css. Il va tomber comme s'il s'agissait d'une liste déroulante avec une case à cocher.

Voici un bon lien de jquery 

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

8
शेखर

Ce lien a des cases à cocher dans la liste déroulante, j'espère que ce lien convient le mieux à votre question. Http://wenzhixin.net.cn/p/multiple-select/#setselects-getselects

6
RamyaSree

Ce tutoriel présente un guide complet étape par étape pour la création d’une liste déroulante multisélection avec des cases à cocher dans mvc Une liste déroulante multisélection avec des cases à cocher dans MVC

Vous avez besoin d'une étiquette de sélection 

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

ou vous pouvez utiliser Html.ListBoxFor

Vous avez besoin du script suivant 

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

Et ci-dessous css et les fichiers de script

<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"/>
1
PVivek