1
I have a form that the user can add several languages who can speak, this form consists of a dropdown and a button to add the respective language. At the moment I click on the add button it adds new object to an array, as shown in the following image:
What I wanted to do is that whenever a new language is added, at the same time an Hidden or disable input is created underneath the dropdown with the name/id of the selected language as an example that I show below:
Then follow the code I’m using to add the object, coming from the dropdown, to the 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>
To make the code cleaner and not mix JS with HTML, you can save the template HTML within a tag
script
, withtype="text/x-custom-template"
, as presented in that reply.– Woss