Limite maximale d'options dans un select [Résolu]

Messages postés
984
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
25 septembre 2019
-
Bonjour à tous,

J'utilise ce code pour transférer les options du select "Liste" au Select "Choix".
Ce que je veux en fait c'est limiter le nombre d'options dans le select "Choix" pour ne pas dépasser 12 options.
C'est à dire qu'une fois le select "Choix" a atteint sa limite de 12 options, l'utilisateur ne peut plus rien y ajouter.

Pouvez-vous m'aider svp ?

<script>
    function listbox_moveacross(sourceID, destID) {
        var src = document.getElementById(sourceID);
        var dest = document.getElementById(destID);
        for (var count = 0; count < src.options.length; count++) {
            if (src.options[count].selected == true) {
                var option = src.options[count];
                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                    dest.add(newOption, null); //Standard
                    src.remove(count, null);
                } catch (error) {
                    dest.add(newOption); // IE only
                    src.remove(count);
                }
                count--;
            }
        }
    }
</script>


<select class="custom-select" size="12" id="Liste">
 <option value="pays_01">pays_01</option>
 <option value="pays_02">pays_02</option>
 <option value="pays_03">pays_03</option>
 <option value="pays_04">pays_04</option>
 <option value="pays_05">pays_05</option>
 <option value="pays_06">pays_06</option>
 <option value="pays_07">pays_07</option>
 <option value="pays_08">pays_08</option>
 <option value="pays_09">pays_09</option>
 <option value="pays_10">pays_10</option>
 <option value="pays_11">pays_11</option>
 <option value="pays_12">pays_12</option>
 <option value="pays_13">pays_13</option>
 <option value="pays_14">pays_14</option>
 <option value="pays_15">pays_15</option>
 <option value="pays_16">pays_16</option>
 <option value="pays_17">pays_17</option>
 <option value="pays_18">pays_18</option>
 <option value="pays_19">pays_19</option>
 <option value="pays_20">pays_20</option>
</select>

<button onclick="listbox_moveacross('Liste', 'Choix')">Ajouter</button>
<button onclick="listbox_moveacross('Choix', 'Liste')">Retirer</button>

<select required="required" class="custom-select" size="12" id="Choix">
</select>


Configuration: Windows / Firefox 67.0
Afficher la suite 

1 réponse

Messages postés
984
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
25 septembre 2019
13
0
Merci
Trouvé ^^

<script>
    function listbox_moveacross(sourceID, destID) {
        var src = document.getElementById(sourceID);
        var dest = document.getElementById(destID);
        
        if (destID =='Choix' && dest.options.length==12)
        {
   window.alert('Limite atteinte !');
   return;
  } 
  
        for (var count = 0; count < src.options.length; count++) {
            if (src.options[count].selected == true) {
                var option = src.options[count];
                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                    dest.add(newOption, null); //Standard
                    src.remove(count, null);
                } catch (error) {
                    dest.add(newOption); // IE only
                    src.remove(count);
                }
                count--;
            }
        }
    }
</script>
Commenter la réponse de Sinistrus