Ho una select multi, una select2 per precisione :http://select2.github.io/select2/#multi
Alla selezione di uno dei valori vorrei che mi si creasse un input text con il nome del valore inserito, ad esempio:
<input name="rosso"
<input name="verde"
e così via.
Sono riuscito a creare l'input text al click ma non alla selezione e non riesco a cancellare gli input text alla deselezione.
codice:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$(function()
{
$(".js-example-basic-multiple").select2();
});
</script>
<script>
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".aggiungi-campo");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete"> Cancella</a></div>'); //add input box
}
else
{
alert('Hai raggiunto i limiti')
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<select class="aggiungi-campo js-example-basic-multiple" multiple="multiple">
<option value="rosso">rosso</option>
<option value="verde">verde</option>
<option value="giallo">giallo</option>
</select>
<div class="container1">
</div>