2013-09-05 9 views
8

Pracuję nad projektem MVC4 gdzie mam multi select rozwijanąwielokrotny rozwijana z wyboru w mvc4 brzytwa

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

Its zaludnione z listy latach wspomniałem w kontrolerze

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; 

i na dropdown kliknij wywołuję jquery, aby wybrać tę konkretną wartość, a także po załadowaniu strony i sprawdzanie wartości zapisanych w bazie danych poprzez ich domyślne zaznaczenie

Oto kod jquery na wybrane wartości, które są zapisane w bazie danych

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

i tu jest kod używam, aby wybrać wartość, gdy użytkownik kliknie lub naciśnij klawisz Ctrl na liście rozwijanej wartości

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

Wszystko działa idealnie. ale teraz problem polega na tym, że użytkownik chce zaznaczyć pole wewnątrz listy rozwijanej, aby można było zaznaczyć opcję.

Jak to zrobić?

Odpowiedz

6

użytkownik chce zaznaczyć wewnątrz listy rozwijanej, aby można było zaznaczyć opcję.

Istnieje fantastyczna wtyczka JQuery o nazwie Dropdown Check List, która przekształca zwykły zaznaczony element HTML na listę rozwijaną listy wyboru.

enter image description here

Download

8

Zamiast używać menu rozwijanego można użyć pola wyboru w div z css. Będzie to wyglądało jak lista rozwijana z polem wyboru.

Tu jest dobre połączenie z jQuery

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

+1

Dzięki za reply..do u mieć żadnego demo .. lub odniesienie, gdzie mogę sprawdzić te rzeczy – Mahajan344

+0

+1 to jest niesamowite. –

+0

[komentarz usunięty przez autora] – clairestreb

0

Ten poradnik pokazuje pełną krok po kroku tworzenia multiselect rozwijaną z wyboru w MVC Multiselect dropdown with checkboxes in MVC

trzeba Select Tag

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

lub użyć Html.ListBoxFor

Trzeba następujący skrypt:

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

A poniżej CSS i skrypt plików

<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"/> 
+0

proszę nie dodawać linków do samouczków ale spróbuj wyjaśnić kroki specjalnie dla tego pytania –

+1

dodane wyjaśnienie pytania :), widziałem kilka odpowiedzi powyżej bez wyjaśnienia stąd właśnie dodałem link, jestem tu nowy :) – PVivek