How to Change Options of <select> with jQuery ?
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
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" >w3wiki</ 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 : 100 vh; 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 ; } |
Output: