<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" />
<style>
.wrap {
display: inline-flex;
border: 1px solid #ccc;
font-family: sans-serif;
}
select {
border: none;
padding: 3px;
}
.items span {
padding: 3px;
background: #bbb;
margin-right: 5px;
display: inline-flex;
}
.fa-times {
margin-left: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="items"></div>
<select name="" id="">
<option value="add">Добавить</option>
<option value="#">Russian</option>
<option value="#">English</option>
<option value="#">Portugal</option>
<option value="#">Japan</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$('select').on('change', function(e) {
var content = $('option:selected', this).text();
if ( $(this).val() == 'add') {
return;
}
if ( $('.items:contains(' + content + ') ').length ) {
$('option:first').prop('selected', 'selected');
return;
}
$('.items').append('<span>' + content + '<i class="fa fa-times" aria-hidden="true"></i></span>');
$('option:first').prop('selected', 'selected');
});
$('.wrap').on('click', '.fa-times', function() {
$(this).parent().remove();
});
</script>
</body>
</html>
