Come creare casella di controllo interno a discesa?

Voglio creare una selezione multipla dropbox elenco. In realtà ho per selezionare più di una opzione con un menu a discesa. Quando io faccio semplicemente questo, come mostrato di seguito:

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

Poi la casella di controllo mostra davanti a discesa del campo. Ma voglio creare per ogni opzione, non per intero, in modo che posso scegliere più di opzione. C’è un modo per fare questo?

  • Sì, puoi farlo. Penso che si può utilizzare alcune librerie per questo. Questo è il discesa-check-list uno che è possibile utilizzare. È inoltre possibile trovare le casi di test qui.

 

6 Replies
  1. 24

    Ecco una semplice lista di controllo a discesa

    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 e script

    <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>
    • Puoi visibile nell’elenco a discesa quando l’utente fa clic fuori?
    • Si vuole nascondere? Questo è ciò che si intende ryt? Se è così ho apportato alcune modifiche. Mettere un tabindex sul contenitore e catturare la sua sfocatura evento. Questo è uno dei modi più economici di far funzionare le cose. Si potrebbe fare questo utilizzando css3 solo. O si potrebbe aggiungere un listener di eventi sull’elemento del documento.
    • Questo è grande, ma non funziona con l’ultima versione di chrome. Dovete cambiare il vostro stile di visualizzazione. Vedi: jsfiddle.net/evfnLn0x
    • Ciao, Questo non funziona in IE9. C’è qualche possibilità di farlo funzionare in IE9?
  2. 17

    Questo non può essere fatto solo in HTML (con modulo di elementi in option elementi). C’è una buona jQuery widget che consente di ottenere l’effetto desiderato che si può trovare qui.

    O si può semplicemente utilizzare uno standard selezionare più campo.

    <select multiple>
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
    </select>
    • Il link che hai fornito sono rotti
    • questa risposta è di 5 anni. Sentitevi liberi di suggerire una modifica.
  3. 3

    Più a tendina con i checkbox e 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>
  4. 1

    Molto semplice codice di Bootstrap e JQuery, senza alcun ulteriore codice javascript :

    HTML :

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <form class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <label class="dropdown-item"><input type="checkbox" name="" value="one">First checkbox</label>
        <label class="dropdown-item"><input type="checkbox" name="" value="two">Second checkbox</label>
        <label class="dropdown-item"><input type="checkbox" name="" value="three">Third checkbox</label>
      </form>
    </div>

    CSS :

    .dropdown-menu label {
      display: block;
    }

    https://codepen.io/funkycram/pen/joVYBv

  5. 0

    JS:

    var expanded = false;
    
    function showCheckboxes() {
      var checkboxes = document.getElementById("checkboxes");
      if (!expanded) {
        checkboxes.style.display = "block";
        expanded = true;
      } else {
        checkboxes.style.display = "none";
        expanded = false;
      }
    }

    CSS:

    .multiselect {
      width: 200px;
    }
    
    .selectBox {
      position: relative;
    }
    
    .selectBox select {
      width: 100%;
      font-weight: bold;
    }
    
    .overSelect {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    
    #checkboxes {
      display: none;
      border: 1px #dadada solid;
    }
    
    #checkboxes label {
      display: block;
    }
    
    #checkboxes label:hover {
      background-color: #1e90ff;
    }

    HTML:

    <form>
      <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
          <select>
            <option>Select an option</option>
          </select>
          <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
          <label for="one">
            <input type="checkbox" id="one" />First checkbox</label>
          <label for="two">
            <input type="checkbox" id="two" />Second checkbox</label>
          <label for="three">
            <input type="checkbox" id="three" />Third checkbox</label>
        </div>
      </div>
    </form>

Lascia un commento