Jak utworzyć pole wyboru wewnątrz rozwijanego menu?

Chcę utworzyć listę dropboxów z wieloma zaznaczeniami. Właściwie muszę wybrać więcej niż jedną opcję za pomocą rozwijanego menu. Kiedy robię to po prostu jak pokazano poniżej:Jak utworzyć pole wyboru wewnątrz rozwijanego menu?

<select> 
<option><input type="checkbox"></option> 
</select>

To pole wyboru jest wyświetlane przed polem rozwijanym. Ale chcę go utworzyć dla każdej opcji nie jako całości, aby móc wybrać więcej niż opcję. Czy jest jakiś sposób to zrobić?

Źródło

2013-10-06 Vivek Kumar

Tak, możesz to zrobić. Myślę, że możesz użyć do tego niektórych bibliotek. To jest [lista kontrolna listy rozwijanej] (https://code.google.com/p/dropdown-check-list/), z której możesz skorzystać. Możesz również znaleźć [przypadki testowe tutaj] (http://dropdown-check-list.googlecode.com/svn/trunk/doc/ddcl-tests.html). –

Nie można tego zrobić w języku HTML (z elementami formularza w elementach option). Jest przyzwoity widget jQuery, który osiąga pożądany efekt, który można znaleźć here. Możesz użyć standardowego pola select multiple.

<select multiple> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select>

Źródło

2013-10-06 08:34:20 Jivings

Oto prosty rozwijana lista kontrolna

css

.dropdown-check-list { 
    display: inline-block; 
} 
.dropdown-check-list .anchor { 
    position: relative; 
    cursor: pointer; 
    display: inline-block; 
    padding: 5px 50px 5px 10px; 
    border: 1px solid #ccc; 
} 
.dropdown-check-list .anchor:after { 
    position: absolute; 
    content: ""; 
    border-left: 2px solid black; 
    border-top: 2px solid black; 
    padding: 5px; 
    right: 10px; 
    top: 20%; 
    -moz-transform: rotate(-135deg); 
    -ms-transform: rotate(-135deg); 
    -o-transform: rotate(-135deg); 
    -webkit-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
} 
.dropdown-check-list .anchor:active:after { 
    right: 8px; 
    top: 21%; 
} 
.dropdown-check-list ul.items { 
    padding: 2px; 
    display: none; 
    margin: 0; 
    border: 1px solid #ccc; 
    border-top: none; 
} 
.dropdown-check-list ul.items li { 
    list-style: none; 
} 
.dropdown-check-list.visible .anchor { 
    color: #0094ff; 
} 
.dropdown-check-list.visible .items { 
    display: block; 
}

// Markup i skrypt

<body> 

    <div id="list1" class="dropdown-check-list" tabindex="100"> 
     <span class="anchor">Select Fruits</span> 
     <ul class="items"> 
      <li><input type="checkbox" />Apple </li> 
      <li><input type="checkbox" />Orange</li> 
      <li><input type="checkbox" />Grapes </li> 
      <li><input type="checkbox" />Berry </li> 
      <li><input type="checkbox" />Mango </li> 
      <li><input type="checkbox" />Banana </li> 
      <li><input type="checkbox" />Tomato</li> 
     </ul> 
    </div> 

    <script type="text/javascript"> 

     var checkList = document.getElementById('list1'); 
     checkList.getElementsByClassName('anchor')[0].onclick = function (evt) { 
      if (checkList.classList.contains('visible')) 
       checkList.classList.remove('visible'); 
      else 
       checkList.classList.add('visible'); 
     } 

     checkList.onblur = function(evt) { 
      checkList.classList.remove('visible'); 
     } 
    </script> 

</body>

Źródło

2013-10-06 09:55:03

Czy widzisz listę rozwijaną, gdy użytkownik kliknie na zewnątrz? –

Chcesz to ukryć? To masz na myśli ryt? Jeśli tak, wprowadziłem pewne zmiany. Umieść tabindex na kontenerze i przechwytuj jego rozmycie. Jest to jeden z najtańszych sposobów na sprawne działanie. Możesz to zrobić tylko za pomocą css3. Lub możesz dołączyć detektor zdarzeń do elementu dokumentu. –

To jest świetne, ale nie działa w najnowszej wersji chrome. Musisz zmienić swój styl wyświetlania. Zobacz: http://jsfiddle.net/evfnLn0x/ – j03m

zawsze można użyć multiple lub multiple = "true" opcję z wybraną tagu ale jest jedna wtyczka jquery, która czyni ją piękniejszą. Nazywa się wybrany i można go znaleźć here.

This fiddle-example might help you to get started

Dziękuję.

Źródło

2014-04-11 11:37:19 Santosh

Wiele opcji rozwijanych z polami wyboru i jQuery.

<div id="list3" class="dropdown-check-list" tabindex="100"> 
<span class="anchor">Which development(s) are you interested in?</span> 
    <ul class="items"> 
     <li><input id="answers_2529_the-lawns" name="answers[2529][answers][]" type="checkbox" value="The Lawns"/><label for="answers_2529_the-lawns">The Lawns</label></li> 
     <li><input id="answers_2529_the-residence" name="answers[2529][answers][]" type="checkbox" value="The Residence"/><label for="answers_2529_the-residence">The Residence</label></li> 
    </ul> 
</div> 

<style> 
.dropdown-check-list{ 
display: inline-block; 
width: 100%; 
} 
.dropdown-check-list:focus{ 
outline:0; 
} 
.dropdown-check-list .anchor { 
width: 98%; 
position: relative; 
cursor: pointer; 
display: inline-block; 
padding-top:5px; 
padding-left:5px; 
padding-bottom:5px; 
border:1px #ccc solid; 
} 
.dropdown-check-list .anchor:after { 
position: absolute; 
content: ""; 
border-left: 2px solid black; 
border-top: 2px solid black; 
padding: 5px; 
right: 10px; 
top: 20%; 
-moz-transform: rotate(-135deg); 
-ms-transform: rotate(-135deg); 
-o-transform: rotate(-135deg); 
-webkit-transform: rotate(-135deg); 
transform: rotate(-135deg); 
} 
.dropdown-check-list .anchor:active:after { 
right: 8px; 
top: 21%; 
} 
.dropdown-check-list ul.items { 
padding: 2px; 
display: none; 
margin: 0; 
border: 1px solid #ccc; 
border-top: none; 
} 
.dropdown-check-list ul.items li { 
list-style: none; 
} 
.dropdown-check-list.visible .anchor { 
color: #0094ff; 
} 
.dropdown-check-list.visible .items { 
display: block; 
} 
</style> 

<script> 
jQuery(function ($) { 
     var checkList = $('.dropdown-check-list'); 
     checkList.on('click', 'span.anchor', function(event){ 
      var element = $(this).parent(); 

      if (element.hasClass('visible')) 
      { 
       element.removeClass('visible'); 
      } 
      else 
      { 
       element.addClass('visible'); 
      } 
     }); 
    }); 
</script>

Źródło

2015-10-01 15:03:08 Luke

Jak utworzyć pole wyboru wewnątrz rozwijanego menu?

Odpowiedz

Powiązane problemy