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 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>
@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;
}
Output:
