How to detect if a dropdown list is a multi-select using jQuery? Last Updated : 15 May, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will learn how to detect if a dropdown list or an HTML select element is a multi-select one or not using jQuery. There is one main approach with which this can be implemented. Approach: Using the prop() method in the jQuery library. There is one select element with an id of dropdown defined in the following example which also has an attribute of multiple attached to it. Also, a button element with a class of check-multi-select is created which on click checks whether the given dropdown is a multi-select one or not. We use the prop() method to check the existence of the multiple attributes bypassing the same as a string parameter. If the method returns the boolean true, then the dropdown list is a multi-select. Otherwise, the dropdown list is not a multi-select since the method returns the boolean false which indicates the absence of the multiple attributes. Example 1: In this example, we will use the above approach. 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 - Detect if a dropdown is a multi-select</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 a multi-select </button> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script type="text/javascript"> $(".check-multi-select").click(function () { if ($("#dropdown").prop("multiple")) { alert( "The given dropdown IS a multi-select" ); } else { alert( "The given dropdown IS NOT a multi-select" ); } }); </script> </body> </html> Output: Example 2: This example is quite similar to the previous example but the only difference is that the dropdown is defined as not a multi-select which means there are no multiple attributes attached to it. Hence, the alert message states that the given dropdown list is not a multi-select. HTML <!DOCTYPE html> <html> <head> <!-- Basic inline styling --> <style> body { text-align: center; } p { font-size: 25px; font-weight: bold; } select { display: block; margin: 0 auto; } button { margin-top: 5rem; cursor: pointer; } </style> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <p>jQuery - Detect if a dropdown is a multi-select</p> <select id="dropdown"> <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 a multi-select </button> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script type="text/javascript"> $(".check-multi-select").click(function () { if ($("#dropdown").prop("multiple")) { alert( "The given dropdown IS a multi-select" ); } else { alert( "The given dropdown IS NOT a multi-select" ); } }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to select/deselect multiple options in dropdown using jQuery ? R rajatsandhu2001 Follow Improve Article Tags : Web Technologies JQuery Geeks Premier League Geeks-Premier-League-2022 CSS-Properties HTML-Questions jQuery-Questions +2 More Similar Reads How to select/deselect multiple options in dropdown using jQuery ? To select and deselect multiple options in a drop-down menu, we will use the HTML and CSS codes. HTML code helps to define the basic structure of the webpage and CSS will benefit in designing the web page. Some essential properties used in the code are as follows- <div> - This is a division ta 4 min read How to add options to a drop-down list using jQuery? Given an HTML document with a drop-down list menu and our task is to add more options to the drop-down list using jQuery. Approach : To add more option to the existing drop-down list using the append() method : var options = { val1: 'C#', val2: 'PHP' }; var selectOption = $('#programmingLanguage'); 2 min read How to get selected text from a drop-down list using jQuery? In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method 2 min read How to get selected text from a drop-down list using jQuery? In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method 2 min read How to create a Disabled Option Select using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a Disabled Option Select using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel= 1 min read How to create an eye catchy Multiselect in jQuery ? In this article, we will create an eye catchy multi-select in jQuery. It is a selection menu in which we can select multiple values at the same time. For example, choosing different colleges.Step 1: First of all create an HTML file and add the following CDN links in the head tag.CDN link for jQuery: 3 min read Like