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
La búsqueda del orden mundial: Europa
stats con chris
Cómo obtener ganancias haciendo malas inversiones
stats con chris
