Limite multiselect HTML

È possibile impostare il limite su multipleselect?Limite multiselect HTML

Di seguito è riportato un codice di esempio in cui l'utente può selezionare più di 1 valore.

<select multiple="multiple" name="choose"> 
<option value="1">Value 1</option> 
<option value="2">Value 2</option> 
<option value="3">Value 3</option> 
<option value="4">Value 4</option> 
<option value="5">Value 5</option> 
<option value="6">Value 6</option> 
</select>

Ma, come limitare l'utente a selezionare non più di 3 valore. Qualche idea?

fonte

2010-11-09 Hafizul Amri

Grazie a tutti, ho avuto l'idea .. –

Possibile duplicato di [Numero limite selezione multipla di selezione] (http://stackoverflow.com/questions/30474614/multiple-select-limit-number-of-selection) – Stranger

È possibile utilizzare jQuery

$("select").change(function() { 
     if($("select option:selected").length > 3) { 
      //your code here 
     } 
    });

fonte

2010-11-09 15:22:02 infinity

Non riesco a vedere nessuno che chieda una soluzione jQuery qui ... – chitzui

Si farebbe questo tramite javascript sul lato client, quindi aggiungere un controllo sul lato server anche nel caso in cui il client abbia disabilitato javascript.

Ecco il codice lato client di base per dare un'idea:

<html> 
    <body> 
     <form onsubmit="validate()"> 
      <select multiple="multiple" id="choose" name="choose"> 
       <option value="1">Value 1</option> 
       <option value="2">Value 2</option> 
       <option value="3">Value 3</option> 
       <option value="4">Value 4</option> 
       <option value="5">Value 5</option> 
       <option value="6">Value 6</option> 
      </select><br> 
      <input type="submit"> 
     </form> 
     <script> 
     function validate() 
     { 
      var selectChoose = document.getElementById('choose'); 
      var maxOptions = 2; 
      var optionCount = 0; 
      for (var i = 0; i < selectChoose.length; i++) { 
       if (selectChoose[i].selected) { 
        optionCount++; 
        if (optionCount > maxOptions) { 
         alert("validation failed, not submitting") 
         return false; 
        } 
       } 
      } 
      return true; 
     } 
     </script> 
    </body> 
</html>

fonte

2010-11-09 15:15:28 RedFilter

RedFilter ha l'idea giusta con la validazione da JavaScript. Non hanno provato, ma si potrebbe fare qualcosa di simile:

var options = document.all.tags("option");<br> 
var selectedCounter = 0; 

for (var i=0; i < options.length; i++) { 
    if (options[i].selected) { 
     selectedCounter++; 
    } 
    checkCounter(); 
} 

function checkCounter() { 
    //disable all options 
}

fonte

2010-11-09 15:36:37 08Hawkeye

script che non consentire più di 3 elementi da selezionare (in contrapposizione a convalidare solo che a presentare il tempo).

http://jsfiddle.net/v33sszgp/

var verified = []; 
document.querySelector('select').onchange = function(e) { 
    if (this.querySelectorAll('option:checked').length <= 3) { 
     verified = Array.apply(null, this.querySelectorAll('option:checked')); 
    } else { 
    Array.apply(null, this.querySelectorAll('option')).forEach(function(e) { 
     e.selected = verified.indexOf(e) > -1; 
    }); 
    } 
}

Nota c'è qualche ulteriore complessità connesse alla prevenzione l'elemento da effettivamente selezionato sulla select e che piuttosto convalida le azioni di un utente e ritorna è se è valido.

fonte

2015-10-16 00:20:03 arcyqwerty

risposta

Problemi correlati