Mostra um dado de um option

[wesllenalves]

Ola pessoal Eu estou com uma duvida estou fazendo uma pagina de cadastro onde a pessoa escolhe ate 12 cidades que quer atuar.

Tenho o codigo já com as cidades mas não sei como fazer para que a pessoa depois que escolher a cidade e clicar no botão adicionar essa cidade seja visualizada no campo a baixo e não permita a pessoa selecionar mais de 12. E como joga esses dados para o banco de dados.

 

Esse e meu código:

<div class="row">
<div class="col-md-6">
<div class="form-group" id="container-adicionar-cidade">
<label for="adicionar-cidade">Informe a cidade</label>
<select id="adicionar-cidade" name="cidade" disabled="disabled" class="form-control" data-apply-select2>
<option value="">Selecione uma cidade</option>
<option value="Brasilia">Brasilia</option>
<option value="Ceilandia">Ceilandia</option>
<option value="Brazlandia">Brazlandia</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
	<button type="button" id="botaoInserirCidade" class="btn btn-primary" data-insert-city>Adicionar</button>
	</div>
</div>
	</div>
	<div class="row">
		div class="col-md-12">									
		div class="form-group no-margin">
				<label>Cidades adicionadas:</label>
					<div id="cidades-adicionadas" class="well no-margin">
		<p class="no-margin" id="mensagem-nenhuma-cidade">Você ainda não adicionou cidades. Use os combos acima para adicionar as cidades.</p>

[Stoma]

Esse controle de adicionar as cidades na caixa debaixo você vai ter que fazer usando JavaScript.

Quando o usuário clicar (evento click/onclick) no botão botaoInserirCidade, você verifica se já tem as 12 cidades. Se tiver, você avisa o usuário; caso contrário você cria o elemento na caixa debaixo com o ID/texto da cidade que está selecionada.