Javascript Girl
  1. Javascript Girl
  3. Numéro de sélection multiple sélection multiple
Intereting Posts
Chargement jQuery à la volée Comment lire l'objet JavaScript avec XPath / HTMLAgilityPack Analyse d'une chaîne Html pour récupérer et modifier l'URL SRC à partir d'une image Empêcher des fuites de mémoire dans Angular 2? Jquery boutons d'affichage spécifiques sur le vol stationnaire Javascript: appelez une fonction après une période spécifique AngularJS ng-controller ne fonctionne pas Accès aux valeurs du tableau sur le laboratoire d'application code.org BackBrowser.js PushStates: Fallback pour Internet Explorer ne fonctionne pas Renvoyer des valeurs de Callback POST immédiatement après avoir sélectionné un fichier Extension Chrome: onclick () événement non déclenchement alerte () popup Comment "ré-activer" des séquences de caractères spéciaux dans javascript? Javascript ancre éviter de faire défiler vers le haut sur le clic Actualisez le prix automatiquement lorsque la quantité a changé sur la page produit Magento

Numéro de sélection multiple sélection multiple

Je souhaite que l'utilisateur sélectionne le maximum de trois options uniquement parmi plusieurs options de sélection. J'ai essayé ce code jusqu'à présent: 

<select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple"> <option value="2">Bungee Jumping</option> <option value="3">Camping</option> <option value="5">Mountain Biking</option> <option value="6">Rappelling</option> <option value="7">Rock Climbing / Bouldering</option> <option value="8">Skiing</option> <option value="10">Wild Life (Safari)</option> <option value="11">Canoeing &amp; Kayaking</option> <option value="12">Rafting</option> <option value="13">Sailing</option> <option value="14">Scuba Diving</option> <option value="15">Snorkeling</option> <option value="16">Surfing</option> <option value="18">Hang Gliding</option> <option value="19">Hot-air Ballooning</option> <option value="20">Micro-light Aircrafts</option> <option value="21">Paragliding</option> <option value="22">Paramotoring</option> <option value="23">Parasailing</option> <option value="24">Skydiving / Parachuting</option> <option value="25">Zip-line / Flying Fox</option> <option value="26">Caving</option> <option value="27">Cycling</option> <option value="28">Fishing &amp; Angling</option> <option value="29">Motorbike trips</option> <option value="30">Nature Walks</option> <option value="31">Road Trips</option> <option value="32">Zorbing</option> <option value="33">Trekking Hiking and Mountaineering</option> <option value="34">Backpacking</option> <option value="61">Water</option> </select>

Le code javascript: 

 <script type="text/javascript"> $("select").change(function() { if ($("select option:selected").length > 3) { $(this).removeAttr("selected"); alert('You can select upto 3 options only'); } }); </script>

Ce code montre la zone d'alerte lorsque vous avez sélectionné plus de 3 options mais autorisez toujours l'accès à sélectionner les 4ème, 5ème, 6ème et ainsi de suite les sélections avec la boîte d'alerte apparaissant. Comment valider cela?

Essaye ça…

Vérifier la longueur et désélectionner après la sélection maximale 

 <select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple"> <option value="2">Bungee Jumping</option> <option value="3">Camping</option> <option value="5">Mountain Biking</option> <option value="6">Rappelling</option> <option value="7">Rock Climbing / Bouldering</option> <option value="8">Skiing</option> <option value="10">Wild Life (Safari)</option> <option value="11">Canoeing &amp; Kayaking</option> <option value="12">Rafting</option> <option value="13">Sailing</option> <option value="14">Scuba Diving</option> <option value="15">Snorkeling</option> <option value="16">Surfing</option> <option value="18">Hang Gliding</option> <option value="19">Hot-air Ballooning</option> <option value="20">Micro-light Aircrafts</option> <option value="21">Paragliding</option> <option value="22">Paramotoring</option> <option value="23">Parasailing</option> <option value="24">Skydiving / Parachuting</option> <option value="25">Zip-line / Flying Fox</option> <option value="26">Caving</option> <option value="27">Cycling</option> <option value="28">Fishing &amp; Angling</option> <option value="29">Motorbike trips</option> <option value="30">Nature Walks</option> <option value="31">Road Trips</option> <option value="32">Zorbing</option> <option value="33">Trekking Hiking and Mountaineering</option> <option value="34">Backpacking</option> <option value="61">Water</option> </select> <script type="text/javascript"> $(document).ready(function() { var last_valid_selection = null; $('#userRequest_activity').change(function(event) { if ($(this).val().length > 3) { $(this).val(last_valid_selection); } else { last_valid_selection = $(this).val(); } }); }); </script>

DEMO: http://jsfiddle.net/9c3sevuv/

Vous utilisez this événement de change intérieur, qui fait référence à la select .

Essaye ça: 

 $("select").on('click', 'option', function() { if ($("select option:selected").length > 3) { $(this).removeAttr("selected"); // alert('You can select upto 3 options only'); } });

Demo: http://jsfiddle.net/tusharj/tmkzebnj/

MODIFIER 

 $("select").on('change', function(e) { if (Object.keys($(this).val()).length > 3) { $('option[value="' + $(this).val().toString().split(',')[3] + '"]').prop('selected', false); } });

Demo: http://jsfiddle.net/tusharj/tmkzebnj/1/

Essayez ce violon . 

 $("select option").click(function() { if ($("select option:selected").length > 3) { $(this).removeAttr("selected"); alert('You can select upto 3 options only'); } });

Vous pouvez désactiver les options non sélectionnées une fois que l'utilisateur a sélectionné la limite maximale et les réactiver lorsque le nombre total de sélection est inférieur à la limite maximale.

Voici l'exemple de code, 

  function maxAllowedMultiselect(obj, maxAllowedCount) { var selectedOptions = jQuery('#'+obj.id+" option[value!=\'\']:selected"); if (selectedOptions.length >= maxAllowedCount) { if (selectedOptions.length > maxAllowedCount) { selectedOptions.each(function(i) { if (i >= maxAllowedCount) { jQuery(this).prop("selected",false); } }); } jQuery('#'+obj.id+' option[value!=\'\']').not(':selected').prop("disabled",true); } else { jQuery('#'+obj.id+' option[value!=\'\']').prop("disabled",false); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="userRequest_activity" name="activity[]" onchange="maxAllowedMultiselect(this, 2)" multiple> <option value="1">Bungee Jumping</option> <option value="2">Camping</option> <option value="3">Mountain Biking</option> <option value="4">Rappelling</option> <option value="5">Rock Climbing / Bouldering</option> <option value="6">Skiing</option> <option value="7">Wild Life (Safari)</option> <option value="8">Canoeing &amp; Kayaking</option> <option value="9">Rafting</option> <option value="10">Sailing</option> </select>

Essaye ça 

 $("select").change(function() { if($("select option:selected").length > 3) { alert('You can select upto 3 options only'); $(this).removeAttr("selected"); } });

DEMO