jQuery Mobile Selectmenu destroy() Method

Last Updated : 28 Dec, 2021

jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops. The destroy() method is used to remove the selectmenu functionality completely and will return the element back to its pre-init state.

Syntax:

$("selector").selectmenu("destroy");

Parameters: This method does not accept any parameters.

CDN Links: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

Example:

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> 
    <script src= 
"https://code.jquery.com/jquery-3.2.1.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"> 
    </script> 
  
    <script> 
        $(function () { 
            $("#btn").on('click', function () { 
                $("#GFG").selectmenu("destroy"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <div data-role="page" id="page1"> 
            <div data-role="header"> 
                <h1>GeeksforGeeks</h1> 
                <h3> 
                    jQuery Mobile Selectmenu destroy() Method 
                </h3> 
            </div> 
  
            <div role="main" class="ui-content"> 
                <label for="GFG" class="select"> 
                    GeeksforGeeks Courses: 
                </label> 
                <select name="GFG" id="GFG"> 
                    <option value="C"> 
                      C Programming 
                    </option> 
                    <option value="CPP"> 
                      C++ Programming 
                    </option> 
                    <option value="JAVA"> 
                      Java Programming 
                    </option> 
                    <option value="overnight"> 
                      Python Programming 
                    </option> 
                    <option value="WEB"> 
                      Web Development 
                    </option> 
                </select> 
            </div> 
  
            <input type="button" id="btn" 
                   style="width: 250px;" value="Destroy"> 
        </div> 
    </center> 
</body> 
  
</html>