HTML wyboru w liście select

Próbuję zbudować listę pole wyboru w liście wyboru (jak ten dla krajów tutaj: link text)HTML wyboru w liście select

używam ASP.NET MVC, więc to musi być czysta/html & | javascript/JQuery. Czy to możliwe? Czy istnieje już prebuild, który mógłbym załadować?

Dzięki

Ripped HTML/CSS:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 

<style type="text/css"> 
body { background-color: #FFFFFF; font-family: Tahoma; font-size: 11px; } 

/* Control Skin */ 
input { font: normal 11px Tahoma; } 
div.ctrl { background-color: window; border: solid 1px ThreeDLightShadow; vertical-align: top; margin: 0; padding: 0; width: 268px; } 
input.Button { background: #2F89BD url('images/btn_default%20gradient.gif') repeat-x; cursor: pointer; 
       height: 24px; color: #FFF; border: solid 1px #2F82BE; padding: 0 10px; width: auto; 
       overflow: visible; } 
input.TextBox { border: solid 1px ThreeDLightShadow; height: 16px; padding-top: 2px; text-indent: 2px; width: 150px; } 

/* For MultiSelectControl */ 
.ms_multiSelector { position: absolute; display:inline ; border: 1px solid ThreeDLightShadow; width: 268px; z-index: 100; } 
.MultiSelectControl_txtInput { width: 240px; border: none 0; margin: 5px 0 0 5px; padding: 0; vertical-align: top; } 
.ms_selectListWrapper { padding: 0; margin: 0; } 
.ms_selectList { background-color: #FFFFFF; overflow: auto; height: 265px; _height: 150px; /* For IE 6 */ } 
.ms_chkSelectAll { padding-left: 3px; } 
.selectList_Wrapper { padding: 0; margin: 0; } 
.multiSelectorCountry { position: relative; clear: both; display: none; border: 1px solid ThreeDLightShadow; width: 275px; } 
.multiSelector { position: absolute; visibility: hidden; border: 1px solid ThreeDLightShadow; width: 275px; } 
.mutliselect_container { padding: 0; margin: 0; border: 0; display: inline; } 
.chkSelectAll { padding-left: 3px; } 
.selectList { background-color: #FFFFFF; overflow: auto; height: 200px; _height: 150px; /* For IE 6 */ } 
.chklstSelect INPUT { float: left; width: 20px; /* To align the chkbox text in FF */ } 
.chklstSelect LABEL { text-align: left; float: right; width: 230px; /* To align the chkbox text in FF */ } 
#imgMultiSelectArrow { width: 20px; height: 20px; margin-left: 300px; padding-left: 300px; } 
.multiselect_close { padding: 4px 0; float: right; width: 65px; background: transparent url(https://careers.microsoft.com/images/close_btn.gif) no-repeat 33px center; } 

</style> 




<title>Untitled Page</title> 
</head> 
<body> 
<div class="ctrl" > 
<input type="text" value="Software Engineering: Development" readonly="readonly" class="MultiSelectControl_txtInput" /> 
<img onmouseover="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20_hover.gif'" onmouseout="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20.gif'" src="https://careers.microsoft.com/Images/mm_dropdown_20x20.gif" alt="Show/Hide" style="height:20px;width:20px;border-width:0px;" /> 
</div> 
<div class="ms_multiSelector"> 

    <div id="selectList" class="ms_selectList"> 
     <input type="checkbox" value="allcountry" class="ms_chkSelectAll" /> 
     <span class="ms_chkSelectAll" >Select All</span> 

<div> 
     <input type='checkbox' value='1' /> 
     <label>Business Services & Administration</label> 
     <br /> 
     <input type='checkbox' value='37' /> 
     <label>Customer Service & Support</label> 
     <br /> 
    </div> 
    </div> 

</div> 


</body> 
</html>

Źródło

2009-10-01 Lee Smith

Dziękujemy za faceta wejściowego. Zrzuciłem trochę html z witryny (powyżej). Będę miał zabawę i zobaczę, co się stanie. –

Skończyło się na tym: http://code.google.com/p/dropdown-check-list/ –

Może to nie jest prawdziwa odpowiedź, ale tak czy owak:

To nie jest standardowa kontrola HTML, zbudowano go z serią wprowadzania tekstu i elementów div, musiałbyś wykonać DUŻO pracy, aby odtworzyć to zachowanie, aby działało (prawdopodobnie z każdą przeglądarką) ...

Nie jestem świadomy żadnego wcześniejszego przygotowania lpers dla MVC, może jest coś dla JQuery? W każdym razie, jeśli nie możesz go znaleźć i musisz to zrobić ręcznie, może powinieneś wybrać inne środki z bardziej standardowymi komponentami (lub powrócić do flashowania lub silverlight, które są znacznie bardziej typowe dla tego rodzaju dostosowań).

Źródło

2009-10-01 09:40:03 Palantir

To nie jest standardowa formant formularza HTML, został zaprojektowany niestandardowo przez programistów.

Nie jestem świadomy żadnych istniejących rozwiązań open source, które będą odtwarzać to zachowanie. Obawiam się, że wygląda na to, że nie da się tego zrobić bez większego wysiłku, niż to będzie warte.

Źródło

2009-10-01 09:46:44 Evernoob

W HTML jedynymi prawidłowymi elementami podrzędnymi elementu select są opcja i optgroup. Zdecydowanie nie zalecam tworzenia niestandardowych form kontroli, ponieważ pokonasz dostęp. Polecam używanie standardowych formantów formularzy w standardowy sposób z elementami etykiety. Możesz modyfikować wygląd i interaktywność formantów formularzy do treści swoich serc za pomocą CSS i JavaScript, z wyjątkiem tego, że nie zmieniają one kolejności wyświetlania lub kolejność tabulacji, ponieważ również pokonują dostępność.

Dostępną alternatywą dla formularza firmy Microsoft jest użycie standardowej listy wyboru z atrybutem "wiele", dzięki czemu wiele opcji można wybrać z pojedynczej listy. Oto przykład:

<select id="myselectlist" name="myselectlist" multiple="multiple"> 
    <option value="option 1">option 1</option> 
</select>

Można użyć CSS udawać wygląd wyboru wraz z pojawieniem sprawdzonej wyboru jako grafikę w tle, który pojawia się z opcji w klasie pseudo „aktywny”. Nie posunąłbym się jednak dalej.

Źródło

2009-10-01 10:04:23

Podoba mi się ta odpowiedź - szczególnie dobra, jeśli chcesz mieć większą szansę pracy na telefonach, tabletach i innych pomysłowość. Wszystko, co jest "od zera", prawdopodobnie będzie miało wewnętrzny pasek przewijania, taki jak div z przepełnieniem: auto, którego większość telefonów nie obsługuje (mimo to obsługują standardowe kontrolki list/combo). Trzymaj się standardu, kiedy możesz. – eselk

Można spróbować po prostu pozostawiając ją jako dość dużo z wyjątkiem dodać

.ms_selectList{ display: none; }

Dodaj powyższego celu, co już masz na ms_selectList

Następnie w jQuery posiada funkcję kliknięcia jakiegoś, który pozwoli zegar wyświetlania ms_selectList zasadniczo sprawia, że wygląda jak pudełko wyboru, gdy jest to po prostu absolutnie pozycjonowany znacznik div z paczką pól wyboru wewnątrz.

I jQuery powinno być coś takiego,

$(document).ready(function(){ 

    $('.ctrl').click(function(){ 
     $('#selectList').toggle(); 
    }); 

})

Źródło

2009-10-01 21:15:40

Skończyło się na tym: http://code.google.com/p/dropdown-check-list/ –

cross-browser rozwiązanie CSS które odpowiadają CSS poziom Standard 2:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>select-multiple</title> 
    <style> 
     /* option:checked:before { content: "✓" } */ 
     option:before { content: "☐ " } 
     option:checked:before { content: "☑ " } 
    </style> 
</head> 
<body> 
<h1>select-multiple</h1> 
<select multiple="" size="5" style="width: 200px;"> 
    <option value="0">Banana</option> 
    <option value="1">Cherry</option> 
    <option value="2">Lemon</option> 
    <option value="3">Banana</option> 
    <option value="4">Cherry</option> 
    <option value="5">Lemon</option> 
    <option value="6">Banana</option> 
</select> 
</body> 
</html>

Fiddle

Źródło

2013-03-06 12:05:35 gavenkoa

Ładna implementacja :) –

To jest piękne! –

Niestety nie działa z msie9 – garyrgilbert

Próbowałem wiele wtyczki js dla pól wyboru na liście wyboru i jak do tej pory najlepsza to Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title>jQuery Multi Select Dropdown with Checkboxes</title> 

<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" /> 
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" /> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> 
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script> 

</head> 

<body> 

<form id="form1"> 

<div style="padding:20px"> 

<select id="chkveg" multiple="multiple"> 

    <option value="cheese">Cheese</option> 
    <option value="tomatoes">Tomatoes</option> 
    <option value="mozarella">Mozzarella</option> 
    <option value="mushrooms">Mushrooms</option> 
    <option value="pepperoni">Pepperoni</option> 
    <option value="onions">Onions</option> 

</select> 

<br /><br /> 

<input type="button" id="btnget" value="Get Selected Values" /> 

<script type="text/javascript"> 

$(function() { 

    $('#chkveg').multiselect({ 

     includeSelectAllOption: true 
    }); 

    $('#btnget').click(function(){ 

     alert($('#chkveg').val()); 
    }); 
}); 

</script> 

</div> 

</form> 

</body> 
</html>

Oto DEMO

Źródło

2014-08-20 21:45:16 pmrotule

HTML wyboru w liście select

Odpowiedz

Powiązane problemy