How to Change Options of <select> with jQuery ?

Last Updated : 16 Oct, 2023

In this article, we will see how we can change options of <select> with the help of jQuery. Here we have options in the select tag and we want to change it dynamically when the user clicks a button.

Prerequisites

Syntax

$("#op4").empty().append(text)

Approach

Create a card structure using Html tags like <div>, <h1>, <h3> for headings and <select>, <option> to create options with values.
Add different styling properties to the card like margin, padding, colors, etc using classes, id’s, etc to the specific element.
Add CDN link in Html file to run jQuery code. Then in script tag write jQuery code.
Make a function “clicked” and write the code for setting attributes name and their respective value also write the new value which you want to change from existing value.
Select the particular id and empty that one using empty() then append the new option value using append()
Invoke the function “clicked” inside click method.
New value will appear after clicked on button.

Example: This example describe how to change options of <select> with jQuery with HTML, CSS, and jQuery.

HTML

<!-- HTML code  -->
  
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
     initial-scale=1.0"> 
    <title>Change option using JQuery</title> 
    <link rel="stylesheet" href="style.css"> 
    <script src= 
"https://code.jquery.com/jquery-3.7.1.min.js"
            integrity= 
"sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
            crossorigin="anonymous"> 
        </script> 
</head> 
  
<body> 
    <div class="p-container"> 
        <div class="container"> 
            <h1 class="gfg">GeeksforGeeks</h1> 
            <h3> 
                  Change option of select tag using JQuery 
              </h3> 
            <select class="selectstyle"> 
                <option id="op1" value="html">HTML 
                </option> 
                <option id="op2" value="css">CSS 
                </option> 
                <option id="op3" value="js">JS 
                </option> 
                <option id="op4" value="angular">Angular 
                </option> 
            </select> 
            <button id="btn"> 
                Click here to change options 
            </button> 
        </div> 
    </div> 
  
    <!-- JavaScript Code -->
    <script> 
  
        // Jquery Code for change options of  
        // <select> using Jquery 
  
        $("#btn").click(clicked) 
        function clicked() { 
  
            // Code to Change option angular to React 
            let text = $('<select></select>') 
                .attr({ "id": "op4", "value": "react" }) 
                .text("React"); 
            $("#op4").empty().append(text) 
  
            // Code to Change option Js to JavaScript 
            let text2 = $('<select></select>') 
                .attr({ "id": "op3", "value": "javaScript" }) 
                .text("JavaScript"); 
            $("#op3").empty().append(text2) 
        } 
    </script> 
</body> 
  
</html>

CSS

@import url( 
'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 
  
body { 
    font-family: 'Poppins', sans-serif; 
} 
  
.p-container { 
    display: flex; 
    justify-content: center; 
    height: 100vh; 
    align-items: center; 
} 
  
.container { 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    justify-content: center; 
    align-items: center; 
    height: 300px; 
    width: 400px; 
    border: 2px solid black; 
    border-radius: 10px; 
    background-color: #FFFADD; 
} 
  
.gfg { 
    color: green; 
} 
  
#btn { 
    border-radius: 5px; 
    padding: 10px; 
    background-color: #22668D; 
    color: white; 
  
} 
  
#btn:hover { 
    background-color: #8ECDDD; 
    color: black; 
} 
  
.selectstyle { 
    background-color: #8ECDDD; 
    height: 25px; 
    width: 74px; 
    margin: 20px; 
    border-radius: 5px; 
}