Limite maximale d'options dans un select

Résolu
Sinistrus Messages postés 1010 Date d'inscription   Statut Membre Dernière intervention   -  
Sinistrus Messages postés 1010 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   17
 
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