web-dev-qa-db-fra.com

Comment limiter les options sélectionnées dans une zone de sélection html?

J'utilise une balise select dans un formulaire que je crée et qui permet plusieurs sélections, mais je souhaite utiliser un maximum de sélections jusqu'à 10. Est-ce possible d'utiliser javascript ou jquery?

Merci d'avance!

javascriptjqueryhtmlforms
25
tominated

Voici un code complet que vous pouvez utiliser ... Il faut aimer le terrain de jeu de l'API Google AJAX :-)

Edit 1: Note: cela ne vous permet que de choisir 5 parce que je n'avais pas envie de copier/coller 10 autres options :-)

<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Sample Select Maximum with jQuery</title>
    <script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">    </script>
    <script type="text/javascript">
    google.load("jquery", "1");

    $(document).ready(function() {

      var last_valid_selection = null;

      $('#testbox').change(function(event) {
        if ($(this).val().length > 5) {
          alert('You can only choose 5!');
          $(this).val(last_valid_selection);
        } else {
          last_valid_selection = $(this).val();
        }
      });
    });
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <select multiple id='testbox'>
      <option value='1'>First Option</option>
      <option value='2'>Second Option</option>
      <option value='3'>Third Option</option>
      <option value='4'>Fourth Option</option>
      <option value='5'>Fifth Option</option>
      <option value='6'>Sixth Option</option>
      <option value='7'>Seventh Option</option>
      <option value='8'>Eighth Option</option>
      <option value='9'>Ninth Option</option>
      <option value='10'>Tenth Option</option>
    </select>
  </body>
</html>

Démo

Un séjour sans faille

29
Topher Fangio

Cela limiterait l'utilisateur à 3 options:

$("select").on("click", "option", function () {
    if ( 3 <= $(this).siblings(":selected").length ) {
        $(this).removeAttr("selected");
    }
});​​​​​​​​​​

Fiddle: http://jsfiddle.net/2GrYk/

15
Sampson

Cette réponse fonctionne dans les cas suivants:

  • Clic normal
  • Seulement mousedown (la souris est déplacée à l'extérieur avant mouseup)
  • Clavier
  • S'il y a différentes options avec la même valeur

Code:

$('#mySelect').on('change', function() {
    if (this.selectedOptions.length < 4) {
        $(this).find(':selected').addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

Démo

Ou, pour les anciens navigateurs qui ne supportent pas selectedOptions,

$('#mySelect').on('change', function() {
    var $sel = $(this).find(':selected');
    if ($sel.length < 4) {
        $sel.addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

Démo

5
Oriol

En utilisant jQuery, vous pouvez attacher une fonction à l'événement change. Comme il s'agit d'un multiple, sélectionnez val () sera un tableau. Vous pouvez toujours vérifier la longueur du tableau et faire quelque chose si sa taille est prédéfinie. Le code suivant montre comment vous saurez combien d'éléments sont sélectionnés.

  $("#select").change(function(){
        alert($(this).val().length);
  });
3
Vincent Ramdhanie

deviner! voici le code résultant:

$(document).ready(function(){

var last_valid_selection = null;
var selected = "";

$("#recipient_userid").change(function(event){

    if ($(this).val().length > 10) {

        alert('You can only choose 10!');
        $(this).val(last_valid_selection);

    } else {

        last_valid_selection = $("#recipient_userid").val();

        $("#recipient_userid option:selected").each(function () {
            selected += "<li>" + $(this).text() + "</li>";
        });

        $("#currentlySelected").html(selected);
        selected = "";
    }

}).change();
});

Merci pour toute votre aide les gars!

2
tominated

En gros, j'ai fusionné plusieurs des réponses fournies pour créer quelque chose de spécifique à un ID particulier:

$("#mySelect").on("click", "option", function(){
    var max = 3;
    if ( max <= $(this).siblings(":selected").length ) {
        alert("Only " + max + " selections allowed.");
        $(this).removeAttr("selected");
    }
});

Rob

1
hepcat72

Vous pouvez utiliser jQuery

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

Voila! Pas de requête nécessaire.

    var is = 0;
    for (var i = 0; i < selectCountryCode.length; i++) {
        if (selectCountryCode.options[i].selected) {
            is++;
        }
        if (is > 3) {
            selectCountryCode.options[i].selected = false;              
        }
    }

Jilusan 

0
jilu