In this article we will show you the solution of jQuery add option to select, we will learn about process of appending one option to the select element at last using jQuery.
To achieve the result append() and onclick() methods helps you widely. With the help of append() anyone can attach one html element to the existing html page or elements if possible.
The onclick() provides permission from user to proceed further process of loads main coding.
Step By Step Guide On jQuery Add Option To Select :-
In this program, we defined select element with default two options. Our target is insert new option to the select element when end user click on 'Add Option'.
It is defined with onclick event with value 'addOpt()'. It refers when click event triggered by users it loads this method definition.
Then you can successfully add value of option 'Black' as last option to the select element.
<!DOCTYPE html>
<html>
<head>
<title>
Adding option
</title>
</head>
<body>
<p>
Select:
<select id="select">
<option value="Pink">Pink</option>
<option value="Green">Green</option>
</select>
</p>
<p>
Click below given button
</p>
<button onclick="addOpt()">
Add option
</button>
<script src= "https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
function addOpt() {
optTxt = 'Black';
optValue = 'Black';
$('#select').append(`<option value="${optValue}">
${optTxt}
</option>`);
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Foremost step you have to import cdn link of jquery to get error-free result.
- We defined select element with id 'select' and options includes 'Pink, Green' with respective values. Then provide text 'Click below given button' to instruct users step-wise.
- Button 'Add Option' definition provide with onclick event value 'addOpt()' declaration. So whenever user clicks on it appended method definition will load on browser.
- In the script block we specifying select element throw id attribute value '#select'. Then binding append() method with html option pair tags whereas value and text replaced with newly set variable values such as 'optTxt and optValue = Black'.
- So when click event occurs this text added to the select element perfectly.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to add one option to the existing select elements option at last place using jquery.
When we execute this program on webpage of browser you can see instruction, select element with initial two options 'Pink and Green' and lastly button 'Add Option'.
Now user need to click on button to insert the option, you can also check it whether added or not by dropping downs the select element.
These are program needs internet support to expand the imported jquery package.
Whenever you are importing external files to the program you need internet support.
I hope this article on jQuery add option to select helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
