Limite maximale d'options dans un select

Résolu/Fermé
Sinistrus Messages postés 1010 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 - Modifié le 5 juin 2019 à 23:22
Sinistrus Messages postés 1010 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 - 6 juin 2019 à 11:13
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

1 réponse

Sinistrus Messages postés 1010 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 17
Modifié le 6 juin 2019 à 11:13
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>
0