▷Cambiar el contenido de un div según la selección del menú desplegable ✔️ Foro Ayuda 【 2024 】

Solución:

La respuesta aceptada tiene un par de deficiencias:

No oriente los ID en su código JavaScript. Utilice clases y atributos de datos para evitar la repetición de su código.
Es una buena práctica ocultar con CSS al cargar en lugar de con JavaScript, para admitir usuarios que no utilizan JavaScript y evitar un parpadeo de mostrar-ocultar al cargar.

Teniendo en cuenta lo anterior, sus opciones incluso podrían tener valores diferentes, pero alternar la misma clase:

<select class="div-toggle" data-target=".my-info-1">
  <option value="orange" data-show=".citrus">Orange</option>
  <option value="lemon" data-show=".citrus">Lemon</option>
  <option value="apple" data-show=".pome">Apple</option>
  <option value="pear" data-show=".pome">Pear</option>
</select>

<div class="my-info-1">
  <div class="citrus hide">Citrus is...</div>
  <div class="pome hide">A pome is...</div>
</div>

jQuery:

$(document).on('change', '.div-toggle', function() {
  var target = $(this).data('target');
  var show = $("option:selected", this).data('show');
  $(target).children().addClass('hide');
  $(show).removeClass('hide');
});
$(document).ready(function(){
    $('.div-toggle').trigger('change');
});

CSS:

.hide {
  display: none;
}

Aquí hay un JSFiddle para verlo en acción.

aquí hay un jsfiddle con un ejemplo de mostrar / ocultar div a través de una selección.

HTML:

<div id="option1" class="group">asdf</div>
<div id="option2" class="group">kljh</div>
<div id="option3" class="group">zxcv</div>
<div id="option4" class="group">qwerty</div>
<select id="selectMe">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

jQuery:

$(document).ready(function () {
  $('.group').hide();
  $('#option1').show();
  $('#selectMe').change(function () {
    $('.group').hide();
    $('#'+$(this).val()).show();
  })
});

Con cero jQuery

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
        <select>

        <div id="content_1" class="inv">Content 1</div>
        <div id="content_2" class="inv">Content 2</div>
        <div id="content_3" class="inv">Content 3</div>
        
        <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementById(this.value);
                    if (vis !== null) {
                        vis.className="inv";
                    }
                    if (target !== null ) {
                        target.className="vis";
                    }
            });
        </script>
    </body>
</html>

Codepen

document
  .getElementById('target')
  .addEventListener('change', function () {
    'use strict';
    var vis = document.querySelector('.vis'),   
      target = document.getElementById(this.value);
    if (vis !== null) {
      vis.className="inv";
    }
    if (target !== null ) {
      target.className="vis";
    }
});

.inv {
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
        <select>

        <div id="content_1" class="inv">Content 1</div>
        <div id="content_2" class="inv">Content 2</div>
        <div id="content_3" class="inv">Content 3</div>
    </body>
</html>

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Cambiar el contenido de un div según la selección del menú desplegable

Solución:

Utiliza Nuestro Buscador

Preguntas Relacionadas: