This blog post demonstrates you to create and manipulate dynamically select option field in form using jQuery.

In our tutorial we have created simple HTML form to add user inputs in select option field by clicking on create select option button.

moreover, user can add or remove more options into select field.

Watch our live demo and Just follow our codes or download it to use.

 

 

HTML file: select_jquery.html

Given below our HTML codes to create simple form.

<!DOCTYPE html>
<html>
<head>
<title>Add Option To Select Tag in Form using jQuery - Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<!-- Include CSS File Here -->
<link rel="stylesheet" href="select_jquery.css"/>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="select_jquery.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>Add Option To Select Tag in Form using jQuery</h2>
<form action="">
<div class="hide">
<label>Add Options:</label>
<p><input type="text" id="option1" placeholder="option1"/><img class="add" src="images/add.png"/></p>
<div class="more"></div>
<input type="button" id="button" value="Create Select Option"/>
</div>
<label>Select Option:</label>
<div id="prm">
<!-- Here Select Option Field will be Created -->
</div>
</form>
</div>
</div>
</body>
</html>

 

jQuery File: select_jquery.js

This file contains jQuery code to meet above requirements.

$(document).ready(function() {
// Function To Add or Remove New Option Field in Form.
var i = 2;
$(".add").on("click", function add_new() {
$(".more").append($("<p/>").append("<input type='text' id='option" + i + "' placeholder='option" + i + "'/>", $("<img/>", {
class: 'add',
src: 'images/add.png'
}).click(function() {
add_new();
}), $("<img/>", {
class: 'del',
src: 'images/del.png'
}).click(function() {
$(this).parent().remove();
})))
i = i + 1;
});
// Below function executes on click of create select button.
$("#button").on("click", function() {
// To Clear Previous Select Option Field if Exists in Div.
$("#prm").empty();
// Creating Select Option in Div.
$("#prm").append("<select></select>");
// Creating Options and Adding it To Above Select Tag.
$("input[type=text]").each(function() {
if ($(this).val() == "") {
alert($(this).attr('id') + " is Empty !");
} else {
$("select").append('<option>' + $(this).val() + '</option>');
}
});
});
});

 

CSS file: select_jquery.css

Styling HTML elements.

/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
h2{
text-align: center;
}
div.container{
width: 960px;
height: 610px;
margin:50px auto;
font-family: 'Droid Serif', serif;
position:relative;
}
div.main{
width: 320px;
float:left;
padding: 10px 60px 40px;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
margin-top: 70px;
}
input[type=text]{
width: 80%;
height: 25px;
padding-left: 5px;
margin-bottom: 10px;
margin-top: 5px;
box-shadow: 0 0 5px;
border: 1px solid #b7b7b7;
color: #4f4f4f;
font-size: 16px;
}
span{
color:red;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
#button {
font-size: 17px;
border: 1px solid gray;
padding: 7px 35px;
background-color: #E3B5F5;
font-weight:bold;
box-shadow: 0 0 5px;
border-radius: 2px;
cursor: pointer;
width:100%;
}
select{
width:100%;
height:30px;
font-size:16px;
font-family:cursive;
}
.add, .del{
margin-left: 12px;
}

Conclusion:

In above example we have explained  how to create and manipulate select option field in form using jQuery. Hope you like it,  Keep reading our blogs.

Check out some more related blogs here –