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=
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(
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;
} |
Output:
change options of with jQuery