Tenho um formulário que o utilizador pode adicionar várias línguas que sabe falar, esse formulário é constituído por um dropdown e um botão para adicionar a língua respectiva. De momento eu ao clicar no botão adicionar ele adiciona-me novo objeto a um array, como mostro na imagem seguinte:
O que eu queria fazer é que sempre que fosse adicionada uma nova língua, ao mesmo tempo me cria-se por baixo da dropdown um input hidden ou disable com o nome/id da língua selecionada como exemplo que mostro em baixo:
Segue de seguida o código que estou a usar para adicionar o objeto, vindo da dropdown, ao array
$(document).ready(function() {
var options = [];
// adicionar linguas ao ao objeto para mostrar
$('#add-lingua').click( function () {
options.push({
"id" : $("#selectLinguas option:selected").val(),
"lingua" : $("#selectLinguas option:selected").text(),
});
$("#selectLinguas option:selected").remove();
console.log(options);
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group selectLinguas">
<div class="col-md-9">
<label for="selectLinguas"><strong>Conhecimento de línguas</strong></label>
<select class="form-control" id="selectLinguas" name="selectLinguas">
<option value="1">Lingua 1</option>
<option value="2">Lingua 2</option>
<option value="3">Lingua 3</option>
<option value="4">Lingua 4</option>
</select>
</div>
<label for="add-lingua"></label>
<div class="col-md-3"><button type="button" class="btn form-control add-lingua" id="add-lingua">Adicionar</button></div>
</div>
<div class="form-group selectedLinguas">
<div class="col-md-6">
<input type="text" disabled name="linguaSelecionada" id="linguaSelecionada" class="form-control" value=""/>
</div>
<div class="col-md-3">
<select class="form-control" id="selectNivelLingua" name="selectNivelLingua">
<option value="satisfaz">Satisfaz</option>
<option value="bom">Bom</option>
<option value="muito bom">Muito Bom</option>
</select>
</div>
<div class="col-md-3">
<button type="button" id="remove-Lingua" class="btn btn-danger"><i class="fa fa-close"></i></button>
</div>
</div>