Limite maximale d'options dans un select
Résolu
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 ?
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
-
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>