Hola tengo un <select>
en el cual cada <option>
genera un texto.
Lo que quiero realizar es que al seleccionar otra opción ya no salga la anterior, que solo salga una.
Por ejemplo: Si selecciono la opción 1 aparecerá "UNO", luego si selecciono la opción 3 aparecerá el "UNO" generado anteriormente y "TRES", entonces cuando pase esto quiero que el "UNO" ya no aparezca.
$(document).ready(function() {
var $mensajeUno = $(
'<h1>UNO</h1>'
);
var $mensajeDos = $(
'<h1>DOS</h1>'
);
var $mensajeTres = $(
'<h1>TRES</h1>'
);
var $mensajeCuatro = $(
'<h1>CUATRO</h1>'
);
$("#select_num").on("change", function() {
var seleccion = $(this).val();
switch (seleccion) {
case '1':
$('#mensajeUno').append($mensajeUno);
break;
case '2':
$('#mensajeDos').append($mensajeDos);
break;
case '3':
$('#mensajeTres').append($mensajeTres);
break;
case '4':
$('#mensajeCuatro').append($mensajeCuatro);
break;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="select_num">
<option value=''>Seleccione...</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<div id="mensajeUno"></div>
<div id="mensajeDos"></div>
<div id="mensajeTres"></div>
<div id="mensajeCuatro"></div>
ID
?(div id="mensajeUno")
porque se puede hacer de una forma dinamica$("#select_num option:selected").attr('disabled','disabled');