Ofrecemos dos soluciones, una usando JavaScript y la otra usando JQuery. Para personalizar la plantilla usamos Bootstrap.
Ofrecemos dos soluciones, una usando JavaScript y la otra usando JQuery. Para personalizar la plantilla usamos Bootstrap.
El funcionamiento del código aparece a continuación:
El código lo puedes descargar de mi repositorio de Github o lo puedes copiar/pegar de JSFiddle.
Primero mostramos la solución usando JQuery y luego usando JavaScript.
1. JQuery
El código abarca 2 archivos. La plantilla HTML select-option-jquery.html se lee:
<html>
<head>
<!-- bootstrap 5.2.3-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- style sheet -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container col-6 mt-4">
<!-- select option -->
<div>
<select class="form-select" id="list">
<option value="item1" selected>texto 1</option>
<option value="item2">texto 2</option>
<option value="item3">texto 3</option>
</select>
</div>
<div class="p-2">
<div id="option-item1" class="option" style="display: block;">
Resultado 1 contenido
</div>
<div id="option-item2" class="option" >
Resultado 2 contenido
</div>
<div id="option-item3" class="option">
Resultado 3 contenido
</div>
</div>
</div>
<!-- bootstrap 5.2.3 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- jquery 3.6.3-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<!-- jquery select option -->
<script>
$(document).ready(function() {
var $my_list = $( '#list' );
var $my_option = $( '.option' );
$my_list.on( 'change', function ( e ) {
$my_option.hide();
$( '#option-' + this.value ).show(); //option-item1, option-item2, or option-item3
});
})
</script>
</body>
</html>
style.css se lee:
.option {
display: none;
}
2. JavaScript
El código abarca un solo archivo. La plantilla HTML select-option-js.html se lee:
<html>
<head>
<!-- bootstrap 5.2.3-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container col-6 mt-4">
<!-- select option -->
<div>
<select class="form-select" onchange="selectFunction(this)">
<option value="item1" selected>texto 1</option>
<option value="item2" >texto 2</option>
<option value="item3" >texto 3</option>
</select>
</div>
<div class="p-2">
<div id="option-js-item1" class="option-js" style="display: block;">
Resultado 1 contenido
</div>
<div id="option-js-item2" class="option-js" style="display: none;">
Resultado 2 contenido
</div>
<div id="option-js-item3" class="option-js" style="display: none;">
Resultado 3 contenido
</div>
</div>
</div>
<!-- bootstrap 5.2.3 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- javascript select option -->
<script>
function selectFunction(selected){
var value = selected.value;
let option_item = document.getElementsByClassName('option-js')
for (var i = 0; i < option_item.length; i++ ) {
option_item[i].style.display = 'none';
}
document.getElementById('option-js-'+value).style.display = 'block';
}
</script>
</body>
</html>
Nota: Los archivos Bootstrap no son necesarios. Fueron incluidos en el código para personalizar la plantilla.
Vistas: 1 Github
Artículos Relacionados
Notificaciones
Recibe los nuevos artículos en tu correo electrónico
Otros Artículos
Cómo obtener ganancias explosivas en la bolsa de valores
stats con chris
12 curiosidades de vivir en los Andes
stats con chris
Git en Ubuntu Linux
joushe info
