Skip to content

All topics  /  jQuery

How to Add New Option in Dropdown using JQuery?

jQuery ·

When “How to Add New Option in Dropdown using JQuery?” moves through design, development and browser testing, employee suspension can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys,

In this blog, I will explain how to add new option in dropdown using jquery. we will show add a new option to a select with jquery.i will add single option and multiple options using jquery.

I will show different methods to add a new option to a select with jquery. we will explain add new option in dropdown using jquery.i can add new option in dropdown using jquery.To avoid having to write and append HTML and stick with a more Javascript approach the new option can be appended with jQuery by creating a new option object.

Here the example of add a new option to a select with jquery.

Solution 1: Adding a single option using appending method 1


Now in this example, i will add dropdown single option using jquery. we will add new option in dropdown using append method jquery solution 

$('.niceSnippetsExample').append(new Option('php', 'laravel', true, true));

Example 

<!DOCTYPE html>
<html>
<head>
    <title>How to Add New Option in Dropdown using JQuery?</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
</head>
<body class="bg-dark">
<div class="container">
    <div class="col-md-6 offset-md-3">
        <div class="card mt-5">
            <div class="card-header">
                <h5>How to Add New Option in Dropdown using JQuery?</h5>
            </div>
            <div class="card-body">
                 <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label class="bg-light">Laguage:</label>
                    <select class="form-control niceSnippetsExample">
                        <option>Html</option>
                        <option>laravel</option>
                    </select>
                </div>
            </div>
        </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $('.niceSnippetsExample').append(new Option('Php', 'php', true, true));
</script>
</body>
</html>

The true, true part at the end will make this item the selected one.

Solution 2: Adding a single option using appending method 2

Here in this example,we will add dropdown single option using jquery. i will add new single option using appende different method.

solution 

var options = $('#niceSnippetsExample').attr('options');
options[options.length] = new Option('Php', 'laravel', true, true);

Example 

<!DOCTYPE html>
<html>
<head>
    <title>How to Add New Option in Dropdown using JQuery?</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
</head>
<body class="bg-dark">
<div class="container">
    <div class="col-md-6 offset-md-3">
        <div class="card mt-5">
            <div class="card-header">
                <h5>How to Add New Option in Dropdown using JQuery?</h5>
            </div>
            <div class="card-body">
                 <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label class="bg-light">Laguage:</label>
                    <select class="form-control niceSnippetsExample">
                        <option>Html</option>
                        <option>laravel</option>
                    </select>
                </div>
            </div>
        </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    var options = $('#niceSnippetsExample').attr('options');
	options[options.length] = new Option('Php', 'laravel', true, true);
</script>
</body>
</html>

Solution 3: Adding multiple options blow in this example, i will add multiple option add using jquery. Using the final method above this last example shows how to replace the existing set of options with a new set, which may have been retrieved from an AJAX call or similar.

Solution 

var newOptions = {
    'php' : 'PHP',
    'laravel' : 'Laravel',
    'html' : 'Html',
    'jquery' : 'Jquery'
};
var selectedOption = 'php';
var select = $('#niceSnippetsExample');
if(select.prop) {
  var options = select.prop('options');
}
else {
  var options = select.attr('options');
}
$('option', select).remove();
$.each(newOptions, function(val, text) {
    options[options.length] = new Option(text, val);
});
select.val(selectedOption);

Example 

<!DOCTYPE html>
<html>
<head>
    <title>How to Add New Option in Dropdown using JQuery?</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
</head>
<body class="bg-dark">
<div class="container">
    <div class="col-md-6 offset-md-3">
        <div class="card mt-5">
            <div class="card-header">
                <h5>How to Add New Option in Dropdown using JQuery?</h5>
            </div>
            <div class="card-body">
                 <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label class="bg-light">Laguage:</label>
                    <select class="form-control niceSnippetsExample">
                        <option>Html</option>
                        <option>laravel</option>
                    </select>
                </div>
            </div>
        </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    var newOptions = {
    'php' : 'PHP',
    'laravel' : 'Laravel',
    'html' : 'Html',
    'jquery' : 'Jquery'
    };
    var selectedOption = 'php';
    var select = $('.niceSnippetsExample');
    if(select.prop) {
      var options = select.prop('options');
    }
    else {
      var options = select.attr('options');
    }
    $('option', select).remove();
    $.each(newOptions, function(val, text) {
        options[options.length] = new Option(text, val);
    });
    select.val(selectedOption);
</script>
</body>
</html>

It will help you....

More on this topic