How to allow the user to add a new option in a <select>?

Question

I need to mount a select where the user can add new options, so I need the select to allow typing and a button next to it would call the function to include in the list.
How can I do that? I only have the basic select with the link that should work as a button:

<select class="tags" name="abrangencia" style="width: 300px;">
    <option value="">opt 1</option>
    <option value="">opt 2</option>
    <option value="">opt 3</option>
    <option value="">opt 4</option>
</select>
<a>
   <img style="height: 38px; margin: -10px;" src="imagens/campanha/botao-mais.jpg">
</a>

Answer 1

You can do it like this, I’ll check if there’s anything typed in here so you don’t add a <option> text-less:

var input_ele = document.getElementById('new-opt');
var add_btn = document.getElementById('add-btn');
var sel_opts = document.getElementById('sel-opts');
var input_val;
add_btn.addEventListener('click', function() {
  input_val = input_ele.value;
  if(input_val.trim() != '') {
    sel_opts.innerHTML += '<option>' +input_val+ '</option>';
    input_ele.value = '';
  }
});

<input id="new-opt"/>
<button id="add-btn">Adicionar opção</button>
<select id="sel-opts">
  <option>Eu já existo</option>
</select>

With datalist would be:

var input_ele = document.getElementById('new-opt');
var add_btn = document.getElementById('add-btn');
var sel_opts = document.getElementById('sel-opts');
var input_val;
add_btn.addEventListener('click', function() {
  input_val = input_ele.value;
  if(input_val.trim() != '') {
    sel_opts.innerHTML += '<option>' +input_val+ '</option>';
    input_ele.value = '';
  }
});

<input list="sel-opts" id="new-opt"/>
<button id="add-btn">Adicionar opção</button>
<datalist id="sel-opts">
  <option>Eu já existo</option>
</datalist>

Heed, as explained in the link this last alternative does not work in IE <= V9 nor in safari