Estoy usando un select múltiple para llenar un select simple. la idea es, si selecciono un valor y no existe, añadirlo al select simple, si existe no hago nada, pero si desactivo la opción, eliminarla del select simple. ¿Cómo podría hacer eso?
Por ejemplo, selecciono value1 y value2 y los agrego a simple select. Si elimino la selección de value1, debe eliminarse de simple select, pero value2 debe estar ahí.
$(function() {
$(document).on('change', '#foo', function() {
var values = $(this).val();
values.forEach(function(val) {
$('#bar option').each(function() {
var v = $(this).val();
if (values.indexOf(v) === -1) {
$('#bar').append('<option value="' + val + '">' + val + '</option>');
return false;
}
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="foo">
<option value="value1">value1</option>
<option value="value2">value2</option>
</select>
<select id="bar">
<option selected disabled>Add some from multiple</option>
</select>