If you want to dynamically add an option, make sure there is a user interface button available for that purpose. User input can be obtained by utilizing the window.prompt method.
Create an option element, assign a value to its attribute, and set its name accordingly. Subsequently, append these elements and nodes to the Document Object Model using the appendChild method.
Feel free to experiment with this functionality. I have included some sample items such as Steak, potatoes, and beer.
var newOptionBtn = document.getElementById("add-option");
var categorySelect = document.getElementById("category");
newOptionBtn.addEventListener("click", function() {
var itemToAdd = prompt("Enter your item:");
var createdOption = document.createElement("option");
createdOption.setAttribute("value", itemToAdd);
var optionText = document.createTextNode(itemToAdd);
createdOption.appendChild(optionText);
categorySelect.appendChild(createdOption);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="category" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8">
<select class="form-control" name="category" id="category">
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
<button id="add-option" class="btn btn-primary">Add New Option</button>