How to Add New Option in Dropdown using JQuery?

jquery

Nicesnippets

171

25-05-2020


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....