JSFiddle - React, Tailwind, and code Playground
HTML
<label for="segmento">selecione um segmento</label><br>
<select name="" id="segmento">
<option value="industria">industria</option>
<option value="tecnologia">tecnologia</option>
<option value="telecomunicações">telecomunicações</option>
</select>
<div id="result" class="filtro">
</div>
CSS
label {
display: inline-block;
padding: 5px;
margin: 5px 0;
font-family: arial;
color: #333;
}
select {
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.etiqueta {
display: inline-block;
padding: 5px 10px;
margin: 0 2px;
background: #eee;
border: 1px solid #ccc;
border-radius: 5px;
font-family: arial, sans-serif;
font-size: .85em;
color: #333;
white-space: nowrap;
}
.etiqueta a {
display: inline-block;
padding: 2px 5px;
border-radius: 100%;
text-decoration: none;
color: #333;
}
.etiqueta a:hover {
color: #36f;
background: #ccc;
}
.filtro {
padding: 10px;
margin-top: 50px;
border: 1px dashed #ccc;
}
JavaScript
/**
* limite de filtros
* padrão: 0;
*/
var filterLimit = 0;
/**
* container das etiquetas e input
*/
var filterContainer = $('#result');
var inputList = $('#result input')
// quando uma opção for selecionada, adiciona a etiqueta
$('#segmento').on('change', function() {
filterLimit++;
var segValue = $('#segmento option:selected').text();
var jaExiste = filterContainer[0].querySelector('input[value="'+segValue+'"]');
if(jaExiste) return;
if( filterLimit < 4 ) {
// insere loop for aqui
for( var i=0; i<= inputList.length; i++ ) {
console.log(inputList)
}
// insere o elemento no DOM
filterContainer.append('<input type="hidden" name="segment[]" value="'+ segValue +'" class="segment">');
// insere a etiqueta
filterContainer.append('<div class="etiqueta">'+ segValue +' <a href="#" id="remove">x</a></div>');
} else {
alert('você só pode selecionar 3 filtros para segmento, remove um ou mais filtros e tente novamente');
}
});