How to Restrict the Number of Selected Options in a Multi-Select Input Field with jQuery ?

Last Updated : 16 Feb, 2024

Restricting the number of selected options in a multi-select input field with jQuery involves limiting the user’s choice to a predefined number of options. This is typically done by tracking the number of selected options and preventing further selections once the limit is reached, providing a controlled user experience.

Table of Content

Using .prop() Method
Using .attr() Method

Approach 1: Using the .prop() Method

Using the .prop() method, set the disabled property of options based on the selection count. Disable excess selections beyond the limit and reset disabled options when necessary to restrict several selected options in the multi-select field.

Example: We are Using jQuery, to limit selections in multi-select fields by enabling/disabling options. Reset disabled options, then disable excess selections beyond the limit to restrict choices. Alert the user if exceeding the limit.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            text-align: center;
        }
 
        p {
            font-size: 25px;
            font-weight: bold;
        }
 
        select {
            display: block;
            margin: 0 auto;
        }
 
        button {
            margin-top: 1rem;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <p>jQuery - Restrict the Number of Selected
        Options in a Multi-Select Input Field</p>
    <select id="dropdown" multiple>
        <option value="Geek 1">Geek 1</option>
        <option value="Geek 2">Geek 2</option>
        <option value="Geek 3">Geek 3</option>
        <option value="Geek 4">Geek 4</option>
    </select>
    <button class="check-multi-select">
        Click me to check if dropdown is within the limit
    </button>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
      </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".check-multi-select").click(function () {
                // Set the maximum number of selections allowed
                let maxSelections = 2;
                let selectedOptions = $("#dropdown").find('option:selected');
                // Reset disabled options
                $("#dropdown option").prop("disabled", false);
                if (selectedOptions.length > maxSelections) {
                    // Disable excess selections
                    selectedOptions.slice(maxSelections).prop("disabled", true);
                    alert("You can only select up to " + maxSelections + " options.");
                } else {
                    alert("You are within the selection limit.");
                }
            });
        });
    </script>
</body>
 
</html>

Output:

jq1

Approach 2: Using the .attr() Method

Using the `.attr()` method, assign `disabled` attribute to options based on selection count. Disable excess selections beyond limit and reset disabled options when needed to limit selected options in multi-select field.

Example: Using the `.attr()` method, enable/disable options based on selection count. Reset disabled options, then disable excess selections beyond limit to restrict selected options in multi-select field.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            text-align: center;
        }
 
        p {
            font-size: 25px;
            font-weight: bold;
        }
 
        select {
            display: block;
            margin: 0 auto;
        }
 
        button {
            margin-top: 1rem;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <p>
          jQuery - Restrict the Number of Selected Options
        in a Multi-Select Input Field
      </p>
    <select id="dropdown" multiple>
        <option value="Geek 1">Geek 1</option>
        <option value="Geek 2">Geek 2</option>
        <option value="Geek 3">Geek 3</option>
        <option value="Geek 4">Geek 4</option>
    </select>
    <button class="check-multi-select">
        Click me to check if dropdown is within the limit
    </button>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
      </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".check-multi-select").click(function () {
                // Set the maximum number of selections allowed
                let maxSelections = 2;
                let selectedOptions = $("#dropdown").find('option:selected');
                // Reset disabled options
                $("#dropdown option").removeAttr("disabled");
                if (selectedOptions.length > maxSelections) {
                    // Disable excess selections
                    selectedOptions.slice(maxSelections).attr("disabled", true);
                    alert("You can only select up to " + maxSelections + " options.");
                } else {
                    alert("You are within the selection limit.");
                }
            });
        });
    </script>
</body>
 
</html>