In this post, you will learn how to add (append) options to an existing select box (dropdown) dynamically using jQuery.
Let’s see the script
<!DOCTYPE html>
<html>
<head>
<title>jQuery Script - Add options to select box dynamically</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function () {
$('#addopt').click(function () {
var newopt = $('#newopt').val();
if (newopt == '') {
alert('Please enter something!');
return;
}
//check if the option value is already in the select box
$('#opt option').each(function (index) {
if ($(this).val() == newopt) {
alert('Duplicate option, Please enter new!');
}
})
//add the new option to the select box
$('#opt').append('<option value=' + newopt + '>' + newopt + '</option>');
//select the new option (particular value)
$('#opt option[value="' + newopt + '"]').prop('selected', true);
});
});
</script>
</head>
<body>
<h3>jQuery Script - Add options to select box dynamically - <a href="">Tutorial is here</a></h3>
<p>New Option: <input type="text" id="newopt" /> <input type="button" value="Add New" id="addopt" /></p>
<p>Select:
<select id="opt">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
</p>
</body>
</html>
What do think about the above script? Easy right?
The above script not only teaching you how to add a new option to an existing dropdown but also teaches you.
- How to check for existing values in the select box
- How to select the particular value in the select box
You can see the demo for the above script here:
amazing.. really point to point information.. thanx a lot
Helllo,
how can i save every add in database ?